/***********************/
/*     ~ Layout ~      */
/***********************/
/* Header */
/* Navs */
/* contents */
/* boxes */

/***********************/
/*     ~ Commons ~     */
/***********************/
/* Texts */
/* fixs */
/* forms */
/* icons */
/* buttons */
/* msg */
/* Bubbles */
/* collapse */
/* Tables */
/* Lists */

/***********************/
/* ~ Pages or Themes ~ */
/***********************/
/* Steps */
/* partitions */
/* Server */
/* Order  */
/* Order Server */
/* Support */

/***********************/
/* ~ media queries   ~ */
/***********************/


/***********************/
/*     ~ Layout ~      */
/***********************/



/***************************/
/*~ Footer bloc  support~ */
/**************************/

 .support-footer {
    padding-top: 50px;
    font-size: 12px;
}
.support-footer [class*="support-footer-"],
.support-center [class*="support-footer-"],
.support-top [class*="support-footer-"],
.support-bottom [class*="support-footer-"] {
    margin: 0;
}
.support-center .span3,
.support-bottom .span3 {
    width: 25%;
}
.support-bottom .span4 {
    width: 33.33%;
}
.support-footer__contacts {
    width: 100%;
    margin-bottom: 15px;
}
.support-footer-left-block,
.support-footer-right-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0 solid #ddd;
    padding-top: 10px;
    height: 125px;
}

.support-footer-left-block {
    border-width: 1px;
    border-radius: 4px 4px 0 0;
}

.support-footer-left-block.span12 {
    border-radius: 4px 4px 4px 4px;
}

.support-footer-right-block.span12 {
    border-radius: 4px 4px 4px 4px;
    border-width: 1px 1px 1px 1px;
}

.support-footer-left-block a:hover {
    text-decoration: none;
}

.support-footer-right-block {
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 4px 4px;
    margin-left: 0;
}
.support-right-block {
    line-height: 7px;
    width: 100%;
    box-sizing: border-box;
}
.support-footer-right-block a:hover {
    color: #eb2c7c;
}
.support-right-block > div {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
.support-left-info {
    margin-top: 15px;
}
.support-center-intro {
    margin-left : 2.3%;
    padding: 5px;
}
@media (min-width: 681px) and (max-width: 1024px) {
    .support-footer__contacts {
        width: 80%;
        transform: translateX(-50%);
        left: 50%;
        position: relative;
    }
    .support-footer-left-block,
    .support-footer-right-block {
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }
    .support-bottom .span3 {
        width: 0;
    }
    .support-bottom .support-footer-left-block,
    .support-bottom .support-footer-right-block {
        width: 50%;
        margin-left: 25%;
    }
    .support-bottom .support-footer-left-block {
        border-width: 1px;
        border-radius: 0;
    }
    .support-bottom .support-footer-right-block{
        border-width: 0px 1px 1px 1px;
        border-radius: 0;
    }

}
@media (max-width: 680px) {
    .support-center .span3,
    .support-bottom .span3,
    .support-center .span4,
    .support-bottom .span4  {
        width: 100%;
    }
}
@media (min-width: 681px) {
    .support-footer-left-block {
        border-radius: 4px 0 0 4px;
    }
    .support-footer-right-block {
        border-width: 1px 1px 1px 0;
        border-radius: 0 4px 4px 0;
    }
}
@media (min-width: 1025px) {
    .support-footer__contacts {
        width: 50%;
        transform: translateX(-50%);
        left: 50%;
        position: relative;
    }
    .support-footer-left-block,
    .support-footer-right-block {
        display: inline-block;
        vertical-align: top;
        width: 50%;
    }
}
@media (max-width: 1024px) {
    .support-bottom .support-footer-left-block{
        min-height: initial !important;
    }
}
@media (max-width: 1200px) {

    .support-center .support-footer-left-block,
    .support-top .support-footer-left-block,
    .support-top .support-footer-right-block,
    .support-center .support-footer-right-block {
        width: 100%;
        margin-left: 2.127659574468085% !important;
    }
    .support-center .support-footer-left-block,
    .support-top .support-footer-left-block {
        border-width: 1px;
        border-radius: 0;
    }
    .support-center .support-footer-right-block,
    .support-top .support-footer-right-block {
        border-width: 0 1px 1px 1px;
        border-radius: 0;
    }
    .support-left [class*="support-footer-"]{
        min-height: 220px;
    }
    .support-left [class*="support-footer-"] .span6,
    .support-bottom [class*="support-footer-"] .span6 {
        width: 100%;
        margin: 0;
    }
    .support-bottom .support-footer-right-block,
    .support-bottom .support-footer-left-block,
    .support-top .support-footer-right-block,
    .support-top .support-footer-left-block,
    .support-center .support-footer-right-block,
    .support-center .support-footer-left-block {
        min-height: 180px;
    }
}

.btn-pink {
    display: inline-block;
    background: #eb2c7c;
    padding: 5px 35px 5px 35px;
    border-radius: 4px;
    color: white;
    transition: transform .15s linear;
}
.btn-pink:hover {
    color: white;
    transform: scale(1.02);
}

.label-grey {
    display: inline-block;
    padding: 8px 15px;
    background: #ddd;
    border-radius: 3px;
}

.text-pink b {
    font-weight: normal;
    font-size: 22px;
    color: #eb2c7c;
}




/***********************/
/*     ~ Helpers ~      */
/***********************/
/* positionings */

/* Header */


a:active, a:focus, :active, :focus, .btn:hover, .btn:focus /* cancel link dotted border for firefox*/ {
    outline: none;
    outline-offset: 0;
}
.sudouser .container,
.devenv .container,
.preprod .container,
.bmaas .container {
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
}
.devenv {
    background: url(/bundles/onlineconsole/images/dev.png) repeat;
}
.preprod {
    background: url(/bundles/onlineconsole/images/preprod.png) repeat;
}
.bmaas {
    background: radial-gradient(at center top, rgb(137, 0, 201) 0%, rgb(81, 0, 153) 35%);
}
.sudouser.devenv {
    background: #4682B4 url(/bundles/onlineconsole/images/sudo-dev.png) repeat;
}
.sudouser.preprod {
    background: url(/bundles/onlineconsole/images/sudo-preprod.png) repeat;
}
.sudouser.online {
    background: url(/bundles/onlineconsole/images/sudo-prod.png) repeat;
}
.sudouser.badsudo {
    background: url(/bundles/onlineconsole/images/badsudo.png) repeat!important;
}
.badge.sudo {
    background-color: #4682B4;
}
.devenv .badge.sudo {
    background-color: #A8BAC9;
}
.preprod .badge.sudo {
    background-color: #A87180;
}
.badge.sudo.online {
    background-color: #C93E7A;
}
.header {
    padding: 20px 30px 10px;
    position: relative;
    box-shadow: 0px 0 rgba(255, 255, 255, 0.5);
}
.logo-online {
 color: #000;
 font-size: 50px;
 position: relative;
 overflow: visible;
}
.logo-online:hover {
 color: #333;
}
.logo-online  span { display: none;}
.logo-online small {
    background: url("/bundles/onlineconsole/images/logo-online-couleur.png") no-repeat  left top;
    display: block;
    font-size: 9px;
    height: 58px;
    left: 0;
    line-height: 0;
    padding-left: 42px;
    padding-top: 53px;
    position: absolute;
    top: 8px;
    z-index: 10;
    width: 200px;
}
.logo-online:hover {
 color: #333;
}
.logo-online small:hover {
    opacity:0.95;
}
.page-header ul {
    float: right;
    list-style: none outside none;
}
.page-header li {
    float: left;
    width: 92px;
    text-align: center;
}
.page-header {
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 18px;
    font-size: 36px;
    font-weight: thin;
}
.container.front {
    background-color: #fff;
}
.container.admin {
    margin: 0 20px;
    width: auto;
    background: #fff;
}
.container.admin table pre {
    word-break: break-word;
}
#headend {
    border-bottom: 8px solid #f9f9f9;
}
#blocuser.nav-pills .txt {
    margin-top: 7px;
    display: inline-block;
}
#blocuser.nav-pills .pull-right {
    margin-left: 4px;
    padding-left: 0px;
}
/*.nav > li.pinkbloc.active > a,
.nav > li.pinkbloc > a:hover,
.nav > li.pinkbloc > a:active {
    background: #EB2C7C;
    color: #fff;
}*/
.nav .pinkbloc.active a.dropdown-toggle .caret,
.nav .pinkbloc a.dropdown-toggle:hover .caret,
.nav .pinkbloc a.dropdown-toggle:active .caret {

    border-bottom-color: #fff;
    border-top-color: #fff;
}

#blocuser.nav-tabs .open .dropdown-toggle,
#blocuser.nav-pills .open .dropdown-toggle,
#blocuser.nav > li.dropdown.open.active > a:hover,
#blocuser.nav > li.dropdown.open.active > a:focus,
#blocuser > li > a:hover,
#blocuser > li > a:focus,
#blocuser > li > a:active {
    color: #4F0599;
    background: #fff;
    text-decoration: none;
}

#blocuser > li.active > a {
    color: #3B393E;
    background: #fff;
}
/* Navs */

.nav {
  list-style: none;
}
.navbar {
  *position: relative;
  *z-index: 2;
  overflow: visible;
  margin-bottom: 0px;
}
.nav-tabs > .active > a .enabledlnk, .nav-tabs > .active > a:hover .enabledlnk , .nav-tabs > .active > a:focus .enabledlnk {
    cursor: pointer;
    color: #4F0599
;
}
.nav-pills .active .dropdown-toggle .caret {
    opacity: 0.9;
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
  margin-top: 0;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
  color: #FFFFFF;
  background-color: #e50068;
}
.btn-group .dropdown-menu{
    background-color:#E6E6E6;
}
.btn-group .dropdown-menu:hover {
    background-color:#fff;
}
.sidenav {
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
.tab {
    background-color: rgb( 242, 242, 242 );
    border-right: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    border-radius: 0 0 5px 0;
    color: black;
    display: inline-block;
    font: 12px Arial;
    left: 0;
    padding: 5px;
    position: absolute;
    top: 0;
}
.nav.nav-pills.nav-stacked > li > a {
    background: #FAFAFB;
}
.nav-pills > .active > a, .nav-pills > .active > a:hover,
.nav.nav-pills.nav-stacked > li.active > a,
.nav.nav-pills.nav-stacked > li > a:hover {
    background: #4F0599;
    color: #fff;
}
.span3 .nav-pills > li > a { margin-top: 0;}
.submenu_left {
    float: left;
    width: 205px;
    background: rgb(249, 249, 249);
    border-radius: 5px;
    font-size: 13.5px;
}
.submenu_left .alert {
    margin-bottom: 0;
}
.submenu_left .nav {
    margin-bottom: 0;
}
.main_content_with_left_menu {
    padding-left: 235px;
}

.breadcrumbloc {
    margin: 20px 0;
    padding: 0;
    text-align: center;
    display: block;
    overflow: hidden;
    line-height: 0;
}
.breadcrumb {
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.breadcrumb > li {
    text-shadow: 0px 0 0 rgba(0,0,0,0);
    color:#B2B6C3;
    background: #FAFAFB;
    border: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid #fff;
    display: block;
    overflow: hidden;
    float: left;
    line-height: 40px;
}
.breadcrumb > li:first-child {
    border-left: none;
}
.breadcrumb > li a {
    color:#fff ;
    background: #B2B6C3;
    padding: 0 15px 0 15px;
    line-height: 40px;
    display: inline-block;
    text-shadow: 0px 0 0 rgba(0,0,0,0);
}
.breadcrumb > li span {
    color:#B2B6C3 ;
    background: #FAFAFB;
    padding: 0 15px 0 15px;
    line-height: 40px;
    display: inline-block;
}
.breadcrumb > li a.underline, .breadcrumb > li.active span {
    color: #fff;
    background: #4F0599
;
    text-shadow: 0px 0 0 rgba(0,0,0,0);
    text-decoration: none;
}





/* content */
.content-box {
  border: 0;
  border-radius: 0;
}
.main_content:after, .content-box:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
}
.row_without_margin {
    margin-left: 0;
}
.twitter li {
  clear: both;
}
.twitter li .twitter-timestamp {
  width: 100%;
  text-align: right;
}

h3.twitbloc {
    height: 30px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #4F0599
;
    background: #C0DDEE;
    border: 1px solid #C0DDEE;
    line-height: 30px;
    padding: 5px 10px;
    margin-bottom: 0;
}
.twitbloc .iconline {
    color: #fff;
}
ul.twitbloc {
    border: 1px solid #C0DDEE;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    overflow: hidden;
}
.twitbloc .glyphicon {
    color: #4F0599
;
}
.twitbloc a:hover {
    text-decoration: none;
    color: #6524a6h;
}
.twitbloc li {
    clear: both;
    padding: 5px 10px;
}
.twitbloc li:nth-child(odd) {
    background: rgba(222, 237, 247,0.5);
}
.twitbloc li:nth-child(even) {
    background: #DEEEF7;
}
.twitbloc a[href^="http://"]:not([href*="console.online.net"]):after,
.twitbloc a[href^="https://"]:not([href*="console.online.net"]):after {
    content: "";
}



.footer { display: block; margin-top: 40px;}
/* boxes */
.bloc {
    background-color: #fff;
    padding: 10px;
}
.box {
    background-color:           white;
    border:                     1px solid #DFDFDF;
    padding:                    20px;
    border-radius:              16px;
    margin-bottom:              20px;
}
.box.content-box {
    border: none;
}
.boxhg {
    background:#FAFAFB;
    color: #fff;
}
.boxwhite {
    background-color: #fff;
    color: #3B393E;
    border: 1px solid #fff;
}
.helpbox {
    background-color: #fff;
    color: #4F0599
;
    border: 1px solid #4F0599
;
}
.boxspan {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.boxform.alert {
    border: 1px solid #DFDFDF;
    color: #3B393E;
}
.boxhl, .boxhl.alert {
    border: 1px solid #4F0599
;
    background: #4F0599
;
    color: #fff;
}

.box--slack {
    font-size: 18px;
    border: 0;
    padding-top: 30px;
}
.box--slack .slack-link {
    display: inline-block;
    background-color: #F5F5F5;
    color: #393939;
    text-decoration: none;
    border: 1px #5b5e6d solid;
    margin-left: 10px;
    text-align: center;
    padding: 0 20px;
    border-radius: 2px;
}
.box--slack .slack-link:hover {
    background-color: #FAFAFB;
}
.box--slack .slack-link:after {
    content: "" !important;
}
.box--slack img {
    width: 96px;
}

.box--home {
    margin-left: 2.3%;
    border-radius: 4px;
}

.bgcolor-phone, .alert.bgcolor-phone {
    background-color: #E50068;
    border: 1px solid #E50068;
    color: #FFFFFF;
}
.bgcolor-phone a {
    color: #fff;
}

.form-horizontal .error .controls, .alert.alert-error, .alert-error {
    background: #FAF2F2;
    border: none;
}
.form-horizontal .noerror.error .controls {
    background: transparent;
}
.control-group.error.noerror input,
.control-group.error.noerror select,
.control-group.error.noerror textarea,
.error.noerror input, .error.noerror select,
.error.noerror textarea {
    border: 1px solid #CCCCCC
}

/***********************/
/*     ~ Commons ~     */
/***********************/

/* Texts */
.h1, .h2,.h3,.h4,.h5,.h6{ font-weight:100;}
h1, h2,h3,h4,h5,h6{margin-top:30px;}
.firsttitle { margin-top: 0; line-height: inherit; margin-bottom: 15px;}
.firsttitle.page-header { margin-bottom: 15px; padding-bottom: 15px; padding-top: 10px ;}
.h1{font-size:38.5px;}
h2.page-header,.h2{font-size:31.5px;}
.h3{font-size:24.5px;}
.h4{font-size:17.5px;}
.h5{font-size:14px;}
.h6{font-size:11.9px;}
.h1 small{font-size:24.5px;}
.h2 small{font-size:17.5px;}
.h3 small{font-size:14px;}
.h4 small{font-size:14px;}

h1, .h1 {
  font-size: 36px;
  line-height: 36px;
  margin-bottom: 18px;
}
a[href^="http://"]:not([href*="console.online.net"]):after,
a[href^="https://"]:not([href*="console.online.net"]):after {
    content: "\e164";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 50%;
    font-style: normal;
    font-weight: normal;
    line-height: inherit;
    opacity: 0.8;
    padding-left: 2px;
    padding-top: 0;
    position: relative;
    vertical-align: top;
}
span.hl {
    color: #4F0599;
    font-weight: bold;
    text-decoration: none;
    font-style: italic;
}
.highlight {
    color: #4F0599
;
}
.highlight2 {
    color: #4F0599
;
}

.underline {
    text-decoration:underline;
}
.no-underline {
    text-decoration:none !important;
}
i.hint {
    display: block;
    margin-left: 1em;
    color: #666;
    font-size: 0.9em;
}
span.unread, .bold {
    font-weight: bold;
}
.deletion {
    color: #ababab;
}

span.info, p.info{
    font-style: italic;
    font-weight: normal;
    font-size: 10px;
    color: rgb(102, 102, 102);
}

span.idn {
  color: #aaa;
  font-style: italic;
}
.fuzzy_time, .idn_original {
    font-style: italic;
    font-weight: normal;
    font-size: 11px;
    color: #666;
}
.lead a {
    font-weight: bold;
    text-decoration: underline;
}
  /* 3D effect */
._3deffect {
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

/* bootstrap fix */
.pagination {
    height: auto;
}

/* clearer links */
.alert a {
    text-decoration: underline;
}
.alert a.btn {
    text-decoration: none;
}

/* Fixs & components */
.center-auto {
    margin: 0 auto;
}
.relativebloc {
    position: relative;
    overflow: hidden;
    display: block;
}
.absolutebloc {
    position: absolute;
    overflow: hidden;
    display: block;
}
.absright{
    right: 0;
}
.fixedbloc {
    position: fixed;
}
.clear {
    clear: both;
    overflow: hidden;
}
.clear-right {
    clear: right;
    overflow: hidden;
}
.clear-left {
    clear: right;
    overflow: hidden;
}
.small_margin {
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.small_xmargin {
    margin-right: 5px;
    margin-left: 5px;
}
.small_ymargin {
    margin-top: 5px;
    margin-bottom: 5px;
}
.no_margin {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.no_xmargin {
    margin-right: 0;
    margin-left: 0;
}
.no_ymargin {
    margin-top: 0;
    margin-bottom: 0;
}
.checkbox.no_ymargin {
    margin-top: 0;
    margin-bottom: 0;
}
.small_padding {
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.small_xpadding {
    padding-right: 5px;
    padding-left: 5px;
}
.small_ypadding {
    padding-top: 5px;
    padding-bottom: 5px;
}
.no_padding {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.no_xpadding {
    padding-right: 0;
    padding-left: 0;
}
.no_ypadding {
    padding-top: 0;
    padding-bottom: 0;
}

.margin_sp3 {
    margin-left: 222px;
}

.margin_form {
    margin-bottom: 9px;
}

.spaced {
    margin: 10px;
}
.bottom-spaced {
    margin-bottom: 35px;
}
.top-spaced {
    margin-top: 35px;
}


/* FORMS */

.required:after, .required.emptyRequired:after {
    content: "*";
    color: #3B393E;
    font-weight: bold;
    padding-left: 4px;
}
form {
    margin-bottom: 0px;
}
.form-actions {
    background-color: #fff;
    border-top: none;
}
.loader {
    background:rgba(255, 255, 255, 0.3);
    display: inline-block;
    min-height: 100%;
    height: 100%;
    left: 0;
    margin: 0;
    padding-top: 25%;
    top:0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1000;
    font-size:20px;
}
.form-horizontal input, .form-horizontal textarea,  .form-horizontal select, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    margin-bottom: 2px;
}
.list-striped li.offer-option:focus {
    background-color: #E0E9FF;
    border-color: #BCE8F1;
    color: #fff;
}
.controls .span4, .controls .span4.error, .controls .span5, .controls .span5.error { line-height: 20px; padding-top: 5px;}
.form-horizontal p.error { line-height: 20px; padding: 0;}
.control-group .emptyRequired { display: none;}
.control-group.error .emptyRequired { display: inline-block;}
.control-group.error label {
    color: #3B393E;
}
.control-group.error label.checkbox {
    color: #EF5774;
}
.error .checkbox input[type="checkbox"] {
    box-shadow: 0 0 6px #EF5774;
}

.form-horizontal .control-label {
    text-align: left;
}
.form-horizontal .control-label-nowidth {
    /* like .control-label, but without width */
    text-align: left;
    float: left;
    padding-top: 5px;
}
.form-horizontal .control-group {
    margin: 0;
}
.form-horizontal .controls {
    position: relative;
    border: 1px solid transparent;
    line-height: 32px;
    overflow: hidden;
    margin-bottom: 1px;
    padding-top: 2px;
}
.form-horizontal p {
    display: inline-block;
    padding: 0 0 0 5px;
    vertical-align: middle;
    margin: 0;
    line-height: 30px;
}

form .bloc-form {
    margin-bottom: 30px;
}
.form_error {
    min-height: 0 !important;
}
.form_error li {
    list-style-type: none;
    color: red;
}
.action-form {
    display: inline-block;
}

#handle_edit label {
    width: 100%;
    padding-left: 25px;
    text-align: left;
}
label {
    display: inline-block;
}
.label_form {
  padding-left: 2px;
  padding-right: 2px;
}
label .minifont {
    font-size: 10px;
}
input.not-spaced, select.not-spaced, .not-spaced {
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}
input:focus:invalid,textarea:focus:invalid,select:focus:invalid {
    color: #3B393E;
    border-color: #3B393E;
}
input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus {
    border-color: #3B393E;
    -webkit-box-shadow: 0 0 6px #3B393E;
    -moz-box-shadow: 0 0 6px #3B393E;
    box-shadow: 0 0 6px #3B393E;
}

.scroll-checkbox {
    overflow-y: auto;
    overflow-x: hidden;
    border: solid 1px #ddd;
    padding: 10px;
}

/* artificially high css weight to override striped table backgrounds */

input[type="checkbox"].label {
  margin-top : 0;
  margin-bottom: 5px;
}

#mail_form label {
    width: 80px;
}
textarea.expand, input.expand, select.expand {
    width: 100%;
}

textarea.autoresize {
    box-sizing: border-box;
    resize: none;
    width: 100%;
}

.login_form div.row {
    margin-bottom: 20px;
}

.login_form label {
    width: 100%;
}
.login_password_row a {
    margin-left: 2em;
    font-style: italic;
}
input.input_large {
    height: 30px; /* 30 + 5x2 + 1x2 = 42 (height+padding+border = btn-large height) */
    width: 350px;
    padding: 5px 10px;
    font-size: 17px;
    color: #7f7f7f;
}
#adm_comment_form textarea {
    width: 100%;
    height: 150px;
}

select.select_small {
    height: 26px;
    padding: 2px;
    line-height: 14px;
    font-size: 12px;
}
textarea.ticketinput, #ticketcontentform_content {
    line-height: 20px;
    font-size: 14px;
}

.success_focus {
  box-shadow: 0 0 5px #84D05F;
  border: 1px solid #84D05F;
}

.error_focus {
  box-shadow: 0 0 5px #da4f49;
  border: 1px solid #da4f49;
}

select.select_large {
    display: block;
    font-size: 17px;
    line-height: 42px;
    height: 42px;
    color: #7f7f7f;
}

input.small_margin, select.small_margin {
    margin-right: 5px;
}

input.extended-search-input, select.extended-search-input {
    width: 300px;
}

label.large_label {
    width: 343px;
}
/* General widget form styles */
/* Date & time selectors */
.widget-date {
    display: inline-block;
}
.widget-time {
    display: inline-block;
}
.widget-datetime .btn-today {
    display: none;
}
.widget-datetime .btn-now {
    display: none;
}
.widget-datetime .btn-today.btn-now {
    display: inline-block;
}

/* resized checkboxes */

.regular-radio, .big-radio, .regular-checkbox, .big-checkbox {display: none !important;}
.regular-checkbox + label, .regular-radio + label {
    display: inline-block !important;
    background-size: 17px 17px;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: left center;
}
.big-checkbox + label, .big-radio + label {
    display: inline-block !important;
    padding-bottom: 10px !important;
    padding-left: 44px !important;
    padding-top: 10px !important;
    background-repeat: no-repeat;
    background-position: left center;
}
/* png alternatives for old browser */
.regular-checkbox + label {background-image: url(/bundles/onlineconsole/images/inpt-small-unchecked.png);}
.regular-checkbox:checked + label {background-image: url(/bundles/onlineconsole/images/inpt-small-checked.png);}
.regular-radio + label {background-image: url(/bundles/onlineconsole/images/radio-unchecked.png);}
.regular-radio:checked + label {background-image: url(/bundles/onlineconsole/images/radio-checked.png);}
.big-radio + label {background-image: url(/bundles/onlineconsole/images/radio-big-unchecked.png);}
.big-radio:checked + label {background-image: url(/bundles/onlineconsole/images/radio-big-checked.png);}
.big-checkbox + label {background-image: url(/bundles/onlineconsole/images/inpt-big-unchecked.png);}
.big-checkbox:checked + label {background-image: url(/bundles/onlineconsole/images/inpt-big-checked.png);}

.regular-checkbox.disabled + label,
.regular-checkbox.disabled:checked,
.regular-radio.disabled + label,
.regular-radio.disabled:checked + label,
.big-radio.disabled + label,
.big-radio.disabled:checked + label,
.big-checkbox.disabled + label,
.big-checkbox.disabled:checked + label,
.regular-checkbox:disabled + label,
.regular-checkbox:disabled:checked,
.regular-radio:disabled + label,
.regular-radio:disabled:checked + label,
.big-radio:disabled + label,
.big-radio:disabled:checked + label,
.big-checkbox:disabled + label,
.big-checkbox:disabled:checked + label {
    opacity: 0.5;
}

/*  /!\ it will break new mutu checkboxes cf new-mutu.css if uncommented.
.regular-checkbox + label,.big-checkbox + label {
    background-image: url(/bundles/onlineconsole/images/inpt-big-unchecked.svg);
}
.big-checkbox:checked + label,.regular-checkbox:checked + label {
    background-image: url(/bundles/onlineconsole/images/inpt-big-checked.svg);
}
.regular-radio + label, .big-radio + label {
    background-image: url(/bundles/onlineconsole/images/radio-big-unchecked.svg);
}
.regular-radio:checked + label, .big-radio:checked + label {
    background-image: url(/bundles/onlineconsole/images/radio-big-checked.svg);
}*/
/* white checkboxes versions
.white-checkbox.regular-checkbox + label,.white-checkbox.big-checkbox + label {
    background-image: url(/bundles/onlineconsole/images/inpt-big-unchecked-white.svg);
}
.white-checkbox.regular-checkbox:checked + label,.white-checkbox.big-checkbox:checked + label {
    background-image: url(/bundles/onlineconsole/images/inpt-big-checked-white.svg);
}*/
/* white radios versions
.white-radio.regular-radio + label,.white-radio.big-radio + label {
    background-image: url(/bundles/onlineconsole/images/radio-big-unchecked-white.svg);
}
.white-radio.regular-radio:checked + label,.white-radio.big-radio:checked + label {
    background-image: url(/bundles/onlineconsole/images/radio-big-checked-white.svg);
}*/

/* icons */
.animated {
    animation: infinite;
}
.spin {
     -webkit-transform-origin: 50% 50%;
     transform-origin:50% 50%;
     -ms-transform-origin:50% 50%; /* IE 9 */
     -webkit-animation: spin 2s infinite linear;
     -moz-animation: spin 2s infinite linear;
     -o-animation: spin 2s infinite linear;
     animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.smallico { font-size: 16px }
.bigico { font-size: 32px }
.hugeico { font-size: 64px }

.pictobloc a { text-decoration: none;}
ul.inline.pictobloc > li, ol.inline.pictobloc > li {
    padding-left: 20px;
    padding-right: 20px;
}
.pictobloc .active a { color: #4F0599
;}


/* buttons */
.btnbloc {
    overflow: hidden;
    padding: 20px 0;
    text-align: center;
}

.label {
    padding: 3px 4px;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* msg */

.warning {
    color:#c09853;
}
.warning input,.warning select,.warning textarea {
    border-color:#F67923;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.warning input:focus,.warning select:focus,.warning textarea:focus  {
    border-color:#F67923;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #dbc59e;
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #dbc59e;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #dbc59e;
}
.error {
    color:#EF5774;
}
.errorbloc {
    margin-left: 10px;
    float: left;
}
.control-group.error input, .control-group.error select, .control-group.error textarea,
.error input, .error select,.error textarea {
    border-color:#EF5774;
    -webkit-box-shadow:inset 0 1px 1px rgba(233, 50, 45, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(233, 50, 45, 0.075);
    box-shadow:inset 0 1px 1px rgba(233, 50, 45, 0.075);
}

.success {
    color:#468847;
}
.success input,.success select,.success textarea {
    border-color:#468847;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.success input:focus,.success select:focus,.success textarea:focus {
    border-color:#356635;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7aba7b;
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7aba7b;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7aba7b;
}
.table tbody tr.info > td {
    background: #f7f5fb;
    border-top: 1px solid #E0E9FF;
    border-bottom: 1px solid #E0E9FF;
}
table .info {
    background: #f7f5fb !important;
    color: #B2B6C3;
}
.info input,.info select,.info textarea {
    border-color:#fff;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.info input:focus,.info select:focus,.info textarea:focus {
    border-color:#2d6987;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7ab5d3;
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7ab5d3;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 6px #7ab5d3;
}
/* bubbles */
.bubble {
    position: relative;
    padding: 0.5%;
    background: #efefef;
    border-radius: 10px;
    border: #ddd solid 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 68.5%;
}
.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 7px 10px;
    border-color: #efefef transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.bubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 7px 10px;
    border-color: #ccc transparent;
    display: block;
    width: 0;
    z-index: 0;
}

.bubble-top:after { top: -10px; }
.bubble-top:before { top: -11px; }

.bubble-left {
    margin-left: 0.5%;
    margin-right: 30%;
}
.bubble-left:after { left: 14px; }
.bubble-left:before { left: 14px; }

.bubble-right {
    margin-left: 30%;
    margin-right: 0.5%;
}
.bubble-right:after { right: 14px }
.bubble-right:before { right: 14px; }

/* collapse */

.collapse.miclos {
  min-height: 20px;
  height: auto;
  margin-bottom: 10px;
}
.collapse.in.miclos {
  max-height: 300px;
  overflow-y: scroll;
}

.collapse .innercollapse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin:0;
  padding: 5px;
  min-height: 20px;
  }
.collapse.in .innercollapse {
  height: 100%;
  overflow: visible;
  display: block;
  white-space: pre;
}
.btncollapse {
    position: relative;
}
.btncollapse.collapsed .morebtn,
.btncollapse .lessbtn {
  display: inline-block;
  white-space: nowrap;
  line-height: 20px;
}
.btncollapse .morebtn,
.btncollapse.collapsed .lessbtn {
  display: none;
  white-space: nowrap;
}
.onhover {
    line-height: 20px;
    font-size: 11px;
    padding: 0px 10px;
    border: 1px solid #4F0599
;
    color: #fff;
    background: #4F0599
;
    border-radius: 3px;
    position: absolute;
    font-weight: bold;
    display: none;
}
.btncollapse.collapsed .morebtn.onhover,
.btncollapse .morebtn.onhover,
.btncollapse .lessbtn.onhover {
    display:none;
}
.onhover.lefty {
    right: 100%;
    margin-right: 5px;
    top: 0;
}
.onhover.righty {
    left: 100%;
    top: -10px;
    margin-left: 5px;
}
.btncollapse.collapsed:hover .morebtn.onhover,
.btncollapse:hover .lessbtn.onhover {
  display: inline-block;
}
.btncollapse:hover .morebtn.onhover,
.btncollapse.collapsed:hover .lessbtn.onhover {
  display: none;
}
.onhover:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent #4F0599
;
    display: block;
    width: 0;
    z-index: 1;
}
.onhover.lefty:after{
    right: -5px;
    top: 5px;
    border-width: 5px 0 5px 5px;
}
.onhover.righty:after{
    left: -5px;
    top: 5px;
    border-width: 5px 5px 5px 0;

}
/* accordion */
.accordion-heading {
    background: #f9f9f9;
}
/* if we use icons to illustrate accordeon heading, then we need that */
.with-pic .accordion-heading a { text-decoration: none; }
.with-pic .accordion-txt { display: inline-block; vertical-align: top; text-decoration: none}
.with-pic a .accordion-txt:hover { text-decoration: underline}
.with-pic .accordion-heading .accordion-toggle {padding: 8px 15px 4px 3px}
/* Tables */

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
.col-striped th {
    background: #FFFFFF;
    color: #B2B6C3;
    border-bottom: 1px dotted #FAFAFB;
    border-top: 1px dotted #FAFAFB;
    line-height: 30px;
}
table td.option {
    padding-left: 35px;
}

table td.addon {
    padding-left: 70px;
}
table.table.valign-center td,
table.table.valign-center th {
    vertical-align: middle;
}
table td.price, table th.price {
    text-align: right;
    padding-right: 20px;
}
table th, table td,
table.table th, table.table td {
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #FAFAFB;
    padding: 8px 3px;
    line-height: 20px;
}
table th, table.table th {
    line-height: 30px;
}
table th.h3, table th.h4 {
    font-weight: normal;
}
table.multiple-tbody tbody th.tbody-title {
    line-height: 30px;
    background: transparent;
    border-top: 0;
    padding-top: 20px;
}
table.multiple-tbody tbody:first-of-type th.tbody-title {
    padding-top: 0;
}

table.rowspan-striped .odd {
    border-top: 1px solid #FAFAFB;
    background: #f9f9f9;
}

.table th.text-right, .table td.text-right, .admin .table td.text-right  {
    text-align: right;
}
.table th.text-center, .table td.text-center  {
    text-align: center;
}
.table th.text-left, .table td.text-left  {
    text-align: left;
}
td.domain_expiring, td.hosting_expiring {
    color: #FF9C00;
    font-weight: bold;
}

td.domain_expired, td.hosting_expired {
    color: #CC0000;
}

table tr.first td, table tr.first th {
    border-top: 0;
}
body table tr.server_focused:nth-child(n) td {
    background-color: #DAE1F9;
    font-weight: bold;
}
body table tr.promotion:nth-child(n) td {
    background-color: #dff0d8 !important;
    font-weight: bold;
}
table.table.table-compact td, table.table.table-compact th {
    line-height: 19px;
    padding: 2px;
    padding-top: 4px;
}
.table-striped table tbody>tr:nth-child(odd) td, .table-striped table tbody>tr:nth-child(odd)>th {
  background-color: transparent;
}

table.table td.nobordercell, table.table th.nobordercell {
    border-top: none;
}
table.table td.vcenter, table.table th.vcenter {
vertical-align: middle;
}
.table-nospace {
    margin: 0;
}

.table td.centered_contents, .table th.centered_contents, .centered_contents {
    text-align: center;
}

.col-striped {
    width: 100%;
}
.col-striped th {
    background: #FFFFFF;
    border-bottom: 1px dotted #FAFAFB;
    border-top: 1px dotted #FAFAFB;
    line-height: 30px;
}
.col-striped tr:nth-child(odd){
    background: #FAFAFB;
}

/* Lists */


ul.inline-list, ul.inline-list li {
    display: inline;
    margin: 0;
    padding: 0;
}
ul.inline-list li:after {
    content: ", ";
}
ul.inline-list li:last-child:after {
    content: "";
}
.list-striped li:nth-child(odd), .list-striped .control-group:nth-child(odd), .list-striped .row:nth-child(odd), .boxform {
  background-color: #f9f9f9;
}

/***********************/
/* ~ Pages or Themes ~ */
/***********************/

/* Steps */
.steps {
    background-color: white;
    border: 1px solid #DFDFDF;
    border-radius: 16px 16px 16px 16px;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}

/*
.steps li {
    display: inline-block;
    padding: 0px 10px 0px 10px;
}
*/

.step4 .steps {
    text-align: left;
}
/* partitions */

.disk {
    margin: 20px auto 0 auto;
    padding: 2px 0 2px 0;
    width: 600px;
    height: 40px;
    border: 1px solid black;
    background-image: url(/media/images/pattern.png);
}

.etendue {
    float: left;
    height: 40px;
    border: 4px solid #3a8041;
    padding: 1px 0 1px 0;
    background-image: url(/media/images/pattern_ext.png);
    margin-top: -5px;
    position:relative;
}

.partition {
    float: left;
    height: 40px;
    margin: 0 1px 0 1px;
}

#partitionTable {
    width: 600px;
    margin: 10px auto 10px auto;
    border-collapse: collapse;
}

#partitionTable td, #partitionTable th {
    vertical-align:top;
    padding: 5px;
    margin: 0;
    height: 20px;
    font-size: 11px;
    border-bottom: 1px solid #3c5f7c;
    text-align:center;
    cursor: pointer;
}

#partitionTable td input, #partitionTable td select, #partitionTable td option {
    width: 80px;
    border: 1px solid #3c5f7c;
    font-size: 11px;
    font-weight: bold;
    color: #3c5f7c;
    text-align:center;
}

#partitionTable td select, #partitionTable td option {
    width: 80px;
    border: 1px solid #3c5f7c;
    font-size: 10px;
    font-weight: bold;
    color: #3c5f7c;
    text-align:center;
}

#partitionTable td option {
    border: 0;
    border-bottom: 1px dotted #3c5f7c;
}
.partitions .bar {
    overflow: visible;
}
/* Server */

#server_state th {
    width: 130px;
    text-align: left;
    vertical-align: top;
    padding-top: 3px;
}

#server_actions {
    padding-top: 67px;
    margin-bottom: 20px;
}

#server_actions input.btn {
  *padding: 3px 0;
  padding: 3px 0;
}

#presta_form .control-group select {
    min-width: 90px;
    width: auto;
    margin: 4px;
}

#presta_form .control-group input {
    width: 300px;
}
#presta_form .control-group textarea {
    width: 300px;
    height: 200px;
}

#presta_form .control-group label {
    float:left;
    width: 140px;
}

.hosting_description {
    padding-top: 10px;
    padding-left: 14px;
}

.hosting_description li {
    line-height: 24px;
}

/* Order  */

#options .bouton {
     margin: 2px 0;
     padding: 2px;
     transition: background-color .15s linear;
}
.bouton.selected {
    background-color: #4F0599;
    color: #fff;
}
.flexboxed .bouton:not(.disabled):hover {
    background-color: #4F0599;
    filter: brightness(110%);
    color: white;
}
.flexboxed .bouton:not(.disabled):hover input[type="radio"] {
    transform: scale(1.2);
}
.list-striped li.selectedblue:nth-child(2n+1), .list-striped .control-group.selectedblue:nth-child(2n+1), .list-striped .row.selectedblue:nth-child(2n+1), .boxform .selectedblue, .selectedblue, .list-striped .selectedblue, .table-striped .selectedblue {
    background-color: #4F0599 !important;
    color: #fff;
}
.bouton.selected h3,
.bouton.selected h4 {
     color: #fff;
}
.list-striped .bouton li:nth-child(2n+1) {
    background: inherit;
}
.offer-option .disabled-label,
.dc .disabled {
     color: #ccc;
}
.offer-option input[type="radio"], .offer-option input[type="checkbox"] {
    line-height: 30px
}
.offer-option-price, .offer-price {
     text-align: right;
}
#option-order-form .offer-price {
    margin-top: 30px;
}
.offer-price, .offer-option-price {
    font-size: 19px;
}
.offer-option-container .moreinfo {
    margin: 7px
}
.offer-price small, .offer-option-price small {
    font-weight: normal;
    padding-left:5px;
    font-size: 9px;
    max-width: 40px;
    display: inline-block;
    -webkit-hyphens: none;
    line-height: 10px;
    text-align: left;
}
#option-order-form .bouton input {
    margin-top: 35px;
}
.disabled-label .offer-option-price {
     color: #ccc;
}
#option-order-form .spaced, #options .spaced {
    margin: 0;
    padding: 15px 0;
}
#option-order-form .page-header  {
  margin-top: 30px;
}
#options #price-per-month span {
     color: #F89406;
     font-size: 36px;
}
#new-options li .extra-description {
     display: none;
}
#options tr.unavailable {
     color: #F2F2F2;
}
    #option-order-form .flexboxed {
        display: flex;

    }
    #option-order-form .flexboxed li {
        flex-grow: 1;
        text-align: center;
    }
    #option-order-form .span-auto {
        width: 100%;
        // padding-left: 5%;
        // padding-right: 5%;
        margin-left: 0 !important;
    }
    #option-order-form .span-auto label {
        display: block;
        width: 100%;
        height: 100%;
        padding: 15px 0;
    }


.summary-container ul {
    background: #fff;
}
.moreinfo {
  font-size: 10px
}
.bouton.selected a,
.bouton.selected a:hover,
.bouton.selected a .text-info {
  color: white;
  text-decoration: none;
}
.bouton a:hover, .bouton a {
    text-decoration: none;
}
.bouton.selected a.btn {
    color: #333;
}

.summary-container {}
.summary-container .offer-extra-description { display: none;}
.summary-container .offer-description {float: left; display: inline-block; }
.summary-container li, .boxwhite tr {
    overflow: hidden;
    border: 3px solid #f9f9f9;
}
.boxwhite tr:first-child {
    background: #F9F9F9;
    border-color: #F9F9F9;
}
.boxwhite tr:last-child {
    border-color: #F9F9F9;
}
.summary-container #support-features strong {
    font-size: 12px;
    float: left;
    margin-left: 5px;
    text-align: left;
}
.summary-container #support-features li {
    text-align: right;
    line-height: 30px;
    padding-right: 5px;
}
.offer-description.collapse.in {
  display: inline-block;
  margin-left: 40px;
  margin-top: 10px;
}
.offer-description ul {
    font-size: 13px;
    font-weight: normal;
}
.offer-description li {
    display: inline-block;
    float: left;
}
.offer-description li:after {
  content: ', ';
}
.offer-description li.last:after {
  content: '.';
}
.offer-description .glyphicon-ok {
    display: none;
}
.offer-description span {
    float: left;
    margin-left: 5px;
}
.offer-description .unavailable {
    display: none;
}
.offer-description li strong {
    font-weight: normal;
    margin-left: 5px;
}
.summary-container .offer-option-price {
    float: right;
    font-size: 100%;
    color: #4F0599;
    margin-left: 0;
    text-align : right;
    width: 75px;
}
.summary-container.boxform, .summary-container-title {
    padding: 0 10px;
}
/* Order Domain */

.options-list > li {
    padding: 10px;
    overflow: hidden;
    min-height: 50px;
}
.options-list > li:nth-child(2n+1) {
    background: #f9f9f9;
}
.options-list > li.selected:nth-child(2n+1) {
    background: #4F0599;
}
.options-list > li .row-fluid {
    padding: 15px 0;
}
li.liconline-mut, li.liconline-mut-bckp {font-size: 10px;}

li.liconline-mut:first-child .iconline-mut:before { content: "q";}
li.liconline-mut:nth-child(2) .iconline-mut:before { content:"*"; }
li.liconline-mut:last-child .iconline-mut:before { content: ""; }

li.liconline-mut-bckp:first-child .iconline-mut-bckp:before { content: "q";}
li.liconline-mut-bckp:nth-child(2) .iconline-mut-bckp:before { content:""; }
li.liconline-mut-bckp:last-child .iconline-mut-bckp:before { content: "*"; }

/**
    Pricing
**/
div#pricing {
    margin-bottom: 23px;
}

div#pricing h3 {
    text-align: center;
    font-size: 3em;
    padding: 30px 0px 30px 0px;
    text-transform: none;
    color: #1275bd;
    font-weight: bold;
}

div#pricing div#pricing-table {
    height: 107px;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #FAFAFB;
    margin: 0 auto;
}

div#pricing div#pricing-table div.pricing-table-head {
    height: 40px;
    border-bottom: 1px solid #FAFAFB;
    box-sizing: border-box;
    text-align: center;
}

div#pricing div#pricing-table div.pricing-table-head div.choice-plan {
    width : 150px;
    display: inline-block;
    line-height: 38px;
}

div#pricing div#pricing-table div.pricing-table-head div.choice-plan input,
div#pricing div#pricing-table div.pricing-table-head div.choice-plan label {
    display: inline-block;
}

div#pricing div#pricing-table div.pricing-table-head div.choice-plan input:checked+label:before {
    font-size: 35px;
    line-height: 19px;
}

div#pricing div#pricing-table div.pricing-table-head div.choice-plan input+label:before {
    content: '\2022';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
    background-color: white;
    border : 2px solid #1275bd;
    color : #1275bd;
    font-size: 0px;
    line-height: 20px;
    margin-top: -3px;
    margin-left : 1px;
    transition: 0.2s;
}

div#pricing div#pricing-table div.pricing-table-head div.choice-plan input {
    margin-right : 5px;
    display: none;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail {
    height: 80px;
    float: left;
    vertical-align: top;
    box-sizing: border-box;
    border-collapse: collapse;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.border {
    margin-top: 26px;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail span.label-price {
    text-align: center;
    display: block;
    margin-top: 10px;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.price-options span.label-price {
    margin-top: 8px;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.price-options div.header {
    background-color: #FAFAFB;
    height: 25px;
    line-height: 23px;
    text-align: center;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.price-options div.optional {
    font-size: 13px;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    float: left;
    height: 53px;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.price-options div.optional.border {
    border-right: 1px solid #FAFAFB;
    border-left: 1px solid #FAFAFB;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail span.value {
    text-align: center;
    font-size: 26px;
    color: #4F0599;
    font-weight: bold;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail.price-options span.price-section {
    font-size: 14px;
}

div#pricing div#pricing-table div.pricing-detail-group div.pricing-detail span.price-section span.aditionnal {
    font-size: 12px;
}

div#pricing div#triangle-price-next {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0px 30px;
    border-color: #def5ff transparent transparent transparent;
    bottom: -30px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
}

div#pricing-select {
    margin-top: 20px;
    padding-bottom: 40px;
}

div#pricing-select div.min,
div#pricing-select div.max {
    position: relative;
    background-repeat: no-repeat;
}

div#pricing-select div.min span.value,
div#pricing-select div.max span.value {
    text-align: center;
    display: block;
    color: #1275bd;
    font-weight: bold;
    font-size: 18px;
}

div#pricing-select div.min span.value {
    margin-top: 90px;
}

div#pricing-select div.max span.value {
    margin-top: 140px;
}


div#pricing-select div.min {
    width : 74px;
    height: 60px;
    margin-top: 50px;
    margin-left: 90px;
    float: left;
    background-image: url('/img/c14/coffre.svg');
    background-size: 100%;
    vertical-align: middle;
}

div#pricing-select div.max {
    width : 186px;
    height: 172px;
    float: right;
    background-image: url('/img/c14/coffre.svg');
    background-size: 100%;
    vertical-align: middle;
}

div#pricing-select div.range {
    width: 65%;
    height: 172px;
    vertical-align: top;
    margin-left: 170px;
    padding-top: 70px;
}
div#pricing-select div.range div#input-range {
    position: relative;
    -webkit-appearance: none;
    border-radius: 10px;
    background-color: white;
    height: 20px;
    width: 100%;
    vertical-align: top;
    border: 2px solid #1275db;
    outline: none;
}

div#pricing-select div.range div#input-range div#cursor {
    cursor: pointer;
    width: 36px;
    height: 36px;
    position: absolute;
    background-color: white;
    border: 3px solid #1275bd;
    border-radius: 50%;
    margin-top: -24px;
    margin-left: -18px;
    transition: 0.2s background-color;
}

div#pricing-select div.range div#input-range div#cursor:before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: #1275bd;
    border-radius: 50%;
    position: absolute;
    margin-top: 6px;
    margin-left: 6px;
    transition: 0.2s background-color;
}

div#pricing-select div.range div#input-range div#cursor:active {
    border: 3px solid #4F0599;
}

div#pricing-select div.range div#input-range div#cursor:active:before {
    background-color: #4F0599;
}

div#pricing-select div.range div#input-range div.jauge {
    width: 0%;
    height: 12px;
    background-color: #1275bd;
    border-radius: 6px;
    margin-top: 2px;
    margin-left: 2px;
}

div#pricing-select div.range div.range-label {
    background-color: #1275bd;
    width: 90px;
    height: 25px;
    position: absolute;
    margin-top: 25px;
    margin-left: -45px;
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

div#pricing-select div.range div.range-label:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent #1275bd transparent;
    left: 50%;
    top: -9px;
    margin-left: -10px;
    position: absolute;
}

/* VPS order step2 */

.vps-summary ul.unstyled > li > .spec-description {

}
.vps-summary ul.unstyled > li > .spec-value, .vps-summary ul.unstyled > li > .spec-unit {
    font-size: 19px;
}
.vps-summary ul.unstyled > li > .spec-value {
    text-align: right;
}
.vps-summary ul.unstyled > li > .spec-unit small {
    font-weight: normal;
    padding-left: 5px;
    font-size: 9px;
    max-width: 40px;
    display: inline-block;
    -webkit-hyphens: none;
    line-height: 10px;
    text-align: left;
}

/* VPS order page*/

.vps-availability.col-striped td {
    text-align: center;
}

.vps-availability.col-striped td:first-child, .vps-availability.col-striped td:nth-child(2),
.vps-availability.col-striped th:first-child, .vps-availability.col-striped th:nth-child(2) {
    text-align: left;
}

.vps-availability.col-striped td:first-child {
    font-weight: bold;
    font-size: 12px;
}
.vps-availability.col-striped td:nth-child(10) {
    text-align: right;
}

/* Order Server */

th.colhdd {
    text-align: center;
}
.server-availability.col-striped td {
    text-align: center;
}
.server-availability.col-striped td:first-child, .server-availability.col-striped th:first-child {
    white-space: pre-wrap;
}
.server-availability.col-striped td:first-child, .server-availability.col-striped td:nth-child(2),
.server-availability.col-striped th:first-child, .server-availability.col-striped th:nth-child(2) {
    text-align: left;
}
.server-availability.col-striped th:nth-child(8) {
    background: #EEEEFF;
}
.server-availability.col-striped td:first-child, .server-availability.col-striped td:nth-child(8) {
    font-weight: bold;
    font-size: 12px;
}
.server-availability.col-striped td:nth-child(8) {
    text-align: right;
    white-space: pre-wrap;
    background: #EEEEFF;
}
.server-availability.col-striped .label {
    white-space: pre-wrap;
    line-height: 20px;
    max-width: 10em;
    font-size: 10px;
    min-width: 15px;
}

li.dc-container {
    line-height: 15px;
}

#option-order-form .dc-container .bouton input {
    margin-top: 0px;
}

/*#option-order-form .dc-container p {
    margin-right: 30px;
}*/

.dc-container .span2 {
    min-width: 150px;
}

.cartlvl1 {
    color: black;
}
.cartlvl2 {
    padding-left: 15px
}
.cartlvl3 {
    padding-left: 30px
}


.checkbox-column {
    width: 20px;
}

#host_domain {
    padding-bottom: 14px;
}

#support-features th {
    width: 70%;
}

#options .modal-link {
    background: none #F89406;
    border-radius: 5px;
    color: #fff;
    display: block;
    float: right;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 5px;
}
#edit-failover ul.unsetted-failover {
    max-height: 320px;
    overflow: auto;
}
#edit-failover .iplists h4 {
    cursor: pointer;
}
#edit-failover ul[data-server-address], #edit-failover ul.unsetted-failover {
    min-height: 20px;
}

#edit-failover .device-failovers hr {
    margin: 10px 0;
}

#edit-failover .label {
    cursor: default;
}

#edit-failover .label-success {
    cursor: pointer;
}

#edit-failover .ui-state-hover {
    background-color: #E0E9FF;
}
#edit-failover .well-small {
    word-break: break-all;
}
#edit-failover .label {
    margin-right: 3px;
}
.mac-group ul {
  margin-left: 15px;
}
li.mac-group {
  list-style-type: none;
}
.rate_anomaly_modal label {
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
}
.rate_anomaly_modal label select {
    margin-top: 5px;
    margin-left: 5px;
}

div.api_doc {
    margin-bottom: 40px;
}

.api_doc table {
    border: 1px solid #f5f5f5;
}

.api_doc ol>li {
    margin-bottom: 20px;
}

#api_examples h4 {
    margin-top: 30px;
}

#api_examples pre {
    max-height: 300px;
    overflow: auto;
}

div.api_client_app:after {
    display: table;
    line-height: 0;
    content: "";
}

.api_client_app code {
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: right;
    width: 190px;

    /* reset */
    background: transparent;
    border: 0;
    color: inherit;
}

/* Support */

#assistance_container {
    border: 1px solid lightgrey;
    border-radius: 5px;
    position: relative;
    display: block;
    padding: 9.5px;
    margin: 0px 0px 10px;
    line-height: 20px;
    word-break: break-all;
    white-space: pre-wrap;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
}

#assistance_light_container {
    border: 1px solid lightgrey;
    border-radius: 5px;
    position: relative;
    display: block;
    padding: 9.5px;
    margin: 0px 0px 10px;
    line-height: 20px;
    word-break: break-all;
    white-space: pre-wrap;
    background-color: rgb(220, 220, 220);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
}

.assistance_reply {
    clear: both;
    margin-top: 40px;
}

tr.flag_xfer_error td {
    color: red;
    font-weight: bold;
}

.ticket_levels tr.level_critical td.level-column, span.level_critical { background-color: #444; }
.ticket_levels tr.level_high td.level-column, span.level_high { background-color: #c00; }
.ticket_levels tr.level_warn td.level-column, span.level_warn { background-color: #f80; }

.ticket_levels tr.level_critical td.level-column a,
.ticket_levels tr.level_high td.level-column a,
.ticket_levels tr.level_warn td.level-column a,
span.level_legend {
    color: white;
}

span.level_legend {
    display: inline-block;
    padding: 5px 10px;
    font-weight: bold;
}

#ticket-error-placeholder {
    margin-top: 15px;
}

.server_location {
    white-space: pre;
}

#quick-ticket ul {
    margin-bottom: 20px;
}

#quick-ticket li {
    margin-bottom: 8px;
}
#quick-ticket {
    display: block;
    overflow: hidden;
    clear: both;
}

.leswag_row {
    display: block;
    font-size: 12px;
    clear: both;
}
.leswag_row h4 {
    font-size: 14px;
}

.AssistanceForm {
    display: none;
    margin-top: 20px;
    padding-left: 5px;
}
.AssistanceForm .row {
    margin-bottom: 15px;
}
.AssistanceForm label {
    font-weight: bold;
}
.AssistanceForm .span4 ,
.AssistanceForm .span8,
.AssistanceForm .span9 {
    margin-left: 0;
}
.AssistanceForm__row--labelMessage label{
    margin-top: 10px;
}
.AssistanceForm input:invalid:focus,
.AssistanceForm textarea:invalid:focus,
.AssistanceForm input:focus,
.AssistanceForm textarea:focus   {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

.AssistanceForm__phone {}
.AssistanceForm__phone input {
    width: 100%;
}
.AssistanceForm__mail {}

.AssistanceForm__mail input {
    width: 100%;
}

.AssistanceForm__content {
    padding-left: 30px;
    max-width: 840px;
}
.AssistanceForm__content textarea {
    margin-top: 15px;
    width: 100%;
    margin-right: 15px;
    min-height: 300px;
}
.AssistanceForm__subject {}
.AssistanceForm__subject input {
    width: 100%;
}
.AssistanceForm__actions{
    margin: 30px 0 100px 20px;
    text-align: center;
}
.AssistanceForm__actions .btn-primary{
    width: 150px;
}
@media (min-width: 979px) {
    .AssistanceForm__labelPhone {
        text-align: right;
    }
}
@media (max-width: 1200px) {
    .AssistanceForm__content {
        padding-left: 0;
    }

}
@media(max-width: 979px) {
    .AssistanceForm div{
        width: 90%;
        margin-left: 0px;
        padding-left: 0;
    }
    div.AssistanceForm__phone {
        margin-left: 0;
    }
}

/* Abuse */

.tab-cases table td, #tab-open-cases table td {
    vertical-align: middle;
}

.tab-cases .label, .page-header > .label {
    background: rgb(255, 246, 230);
    color: rgb(124, 84, 0);
    border-radius: 16px;
    padding: 0px 8px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.abuse-case-table-row-cell-content .label {
    background: rgb(255, 246, 230);
    color: rgb(124, 84, 0);
    border-radius: 16px;
    padding: 0px 8px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#abuse-case-id {
    font-size: 14px;
}

#abuse-case-table {
    display: flex;
    gap: 16px;
    flex-flow: column;
    align-items: normal;
    justify-content: normal;
}

.abuse-case-table-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: normal;
    justify-content: normal;
}

.abuse-admin-case-table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: normal;
    justify-content: normal;
}

.abuse-case-table-row-cell {
    display: flex;
    font-size: 16px;
    line-height: 24px;
    flex-direction: column;
    -moz-box-align: start;
    align-items: start;
    margin: 0px;
}

.abuse-case-table-row-cell-title {
    font-weight: 500;
    color: rgb(34, 38, 56);
    display: inline-flex;
    -moz-box-align: center;
    align-items: center;
}

.abuse-case-table-row-cell-content {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    color: rgb(63, 66, 80);
    margin: 0px;
    width: 100%;
}

#abuse-case-table-row-sep {
    margin: 0px;
    border: 0px;
    width: auto;
    height: 1px;
    flex-shrink: 0;
    background-color: rgb(217, 218, 221);
}

.abuse-container {
    margin: 0px;
    border: 1px solid rgb(217, 218, 221);
    border-radius: 4px;
    padding: 24px;
}

#abuse-tickets {
    margin-bottom: 50px;
}

#abuse-tickets a {
    background: #4F0599;
    color: #fff;
    padding: 10px;
    float: right;
    vertical-align: middle;
    display: inline;
    border-radius: 4px;
}

#abuse-tickets-text {
    vertical-align: middle;
    display: table-cell;
}

#abuse-tickets-a {
    float: right;
}

#abuse-tickets-container {
    display: table;
    width: 100%;
}

#abuse-container-reported-at {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: start;
    justify-content: flex-start;
    margin: 0px 56px;
}

#abuse-container-report-content {
    color: rgb(63, 66, 80);
    font-size: 14px;
    font-family: Inter, Asap;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    text-transform: none;
    text-decoration: none;
    overflow: auto;
}

#abuse-container-report-container-2 {
    margin: 24px 24px 0px;
    border-radius: 4px;
    padding: 24px;
    background-color: rgb(241, 238, 252);
}

#abuse-container-report-container {
    margin-bottom: 16px;
    width: 100%;
}

/* expert mode!!! */
#expert_mode {
    text-align: right;
    margin-right: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 3px;
}
#expert_mode input {
    border: 1px solid #e977a7;
    background: #e977a7;
    background: -moz-linear-gradient(top, #e977a7 1%, #ffe2fe 50%, #e977a7 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e977a7), color-stop(48%,#ffe2fe), color-stop(99%,#e977a7));
    background: -webkit-linear-gradient(top, #e977a7 1%,#ffe2fe 50%,#e977a7 99%);
    background: -o-linear-gradient(top, #e977a7 1%,#ffe2fe 50%,#e977a7 99%);
    background: -ms-linear-gradient(top, #e977a7 1%,#ffe2fe 50%,#e977a7 99%);
    background: linear-gradient(to bottom, #e977a7 1%,#ffe2fe 50%,#e977a7 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e977a7', endColorstr='#e977a7',GradientType=0 );
    color: #EB2F7E;
    box-shadow: 1px 1px 3px #ccc;

}
#expert_mode input:active,
#expert_mode input:hover {
    border: 1px solid #E977A7;
    background: #ffe2fe;
    background: -moz-linear-gradient(top, #ffe2fe 1%, #e977a7 50%, #ffe2fe 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffe2fe), color-stop(50%,#e977a7), color-stop(99%,#ffe2fe));
    background: -webkit-linear-gradient(top, #ffe2fe 1%,#e977a7 50%,#ffe2fe 99%);
    background: -o-linear-gradient(top, #ffe2fe 1%,#e977a7 50%,#ffe2fe 99%);
    background: -ms-linear-gradient(top, #ffe2fe 1%,#e977a7 50%,#ffe2fe 99%);
    background: linear-gradient(to bottom, #ffe2fe 1%,#e977a7 50%,#ffe2fe 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2fe', endColorstr='#ffe2fe',GradientType=0 );
    color: #fff;
    box-shadow: 1px 1px 3px #ccc;
}
#cornifycount {
    display: none;
}


/* Migrations Page EVELF */

#migration-table1 th, #migration-table1 td,
#migration-table2 th, #migration-table2 td,
#migration-table3 th, #migration-table3 td {
    vertical-align: middle;
    text-align: left;
    padding-left: 0.5em;
}
#migration-table1 th,
#migration-table2 th,
#migration-table3 th {
    line-height: 20px;
}
/* couleur rouge sur les col 4 et 5 du tableau de la page liste (2, 3 avec les colspans) */
/* couleur rouge sur les col 2, 3 et 4 du tableau de la page detail */
/* couleur rouge sur les col 2 et 5 du tableau de la page failovers (1, 4 avec les colspans) */
#migration-table1 th:nth-child(3),
#migration-table1 th:nth-child(4),
#migration-table1 tr.first-row td:nth-child(3),
#migration-table1 tr.first-row td:nth-child(4),
#migration-table1 tr.other-row td:nth-child(1),
#migration-table1 tr.other-row td:nth-child(2),
#migration-table2 th:nth-child(1),
#migration-table2 th:nth-child(2),
#migration-table2 th:nth-child(3),
#migration-table2 td:nth-child(1),
#migration-table2 td:nth-child(2),
#migration-table2 td:nth-child(3),
#migration-table3 tr.first-row td:nth-child(2),
#migration-table3 tr.first-row td:nth-child(3),
#migration-table3 tr.other-row td:nth-child(1),
#migration-table3 tr.other-row td:nth-child(2) {
    background: #F8E2E4;
}

/* couleur bleue sur la col 6 du tableau de la page liste (4 avec les colspans) */
/* couleur bleue sur les col 4 et 5 du tableau de la page detail */
#migration-table1 th:nth-child(5),
#migration-table1 tr.first-row td:nth-child(5),
#migration-table1 tr.other-row td:nth-child(3),
#migration-table2 th:nth-child(4),
#migration-table2 th:nth-child(5),
#migration-table2 td:nth-child(4),
#migration-table2 td:nth-child(5) {
    background: #F2F6FD;
    color: #4F0599
;
}

/* monitoring */
.hgline,
#monitoring-table th:nth-child(6),
#monitoring-table td:nth-child(6) {
    background: rgba(224, 233, 255, 0.6);
}

/***********************/
/* ~ media queries   ~ */
/***********************/

@media (max-width: 767px) {
    body {
        position: relative;
    }
    h1, h2, h3, h4, h5, h6 {
        margin-top: 10px;
    }
    h1.highlight {
        width: 95%;
        text-align: right;
        float: left;
    }
    #showmenuleft {
        float: right;
        font-size: 20px;
        margin-top: 18px;
        padding: 1%;
        text-align: right;
        width: 3%;
    }
    #showmenuleft {
        text-decoration: none;
    }
    #showmenuleft.collapsed .glyphicon-chevron-down,
    #showmenuleft .glyphicon-chevron-up {
        display: block;
    }
    #showmenuleft .glyphicon-chevron-down,
    #showmenuleft.collapsed .glyphicon-chevron-up {
        display: none;
    }
    .footer {
        margin-top: 70px;
    }
    .footer .info {
        font-size: 9px;
    }

    .header {
        padding: 0;
    }

    #pricing-detail.header {
        width: 100%;
    }
    .header a {
        display: block;
        padding:0;
        float: left;
        width: 100%;
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    #topmenuphone {
        float: right;
        width:75%;
        display: block;
    }
    #topmenuphone li > a {
        background: #fff;
        border-radius: 5px;
        font-size: 30px;
        height: 30px;
        margin: 5px;
        padding: 5px;
        float: right;
        text-align: center;
        width: 30px;
        border: rgba(0, 0, 0, 0.01) 1px solid;
        box-shadow:inset -1px -1px 6px rgba(0, 0, 0, 0.01),0 0 1px rgba(0, 0, 0, 0.1);
    }
    #topmenuphone li > a.activebtn:after {
        color: #fff;
        content: "";
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-size: 15px;
        font-style: normal;
        font-weight: normal;
        left: 0;
        position: relative;
        top: 8px;
        z-index:20;
    }
    #topmenuphone li.active > a:after {
        border-top: 3px solid #4F0599
;
        content: " ";
        font-size: 15px;
        display: inline-block;
        left: 0;
        position: relative;
        top: 5px;
        width: 20px;
        height: 15px;
        z-index:20;
    }
    #topmenuphone li > a:hover,
    #topmenuphone li > a:focus,
    #topmenuphone li > a.activebtn {
        box-shadow:inset 0px 0px 6px rgba(0, 0, 0, 0.1),1px 1px 1px rgba(0, 0, 0, 0.15);
    }
    #topmenuphone li.active > a,
    #topmenuphone li > a:active {
        color: #4F0599
;
        box-shadow:inset 0px 0px 6px rgba(0, 0, 0, 0.1),-1px -1px 1px rgba(0, 0, 0, 0.15);
    }
    .navphone {
        width:100%;
        background: #efefef;
        display: none;
        overflow: hidden;
        clear: both;
    }
    .navphone.collapse {
        overflow: hidden;
    }
    .navphone.collapse.in {
        overflow: visible;
        display: block;
        height: 100% !important;
    }
    .navphone, .navphone ul {
        background: #efefef;
    }
    .navphone li {
        width: 100%;
        text-align: center;
    }
    .navphone li.divider {
        display: none;
    }
    .navphone  li > ul {
        width: 100%;
        border: none;
        position:relative;
        left: 0;
        top: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    .navphone .open , .navphone  li > ul.open {
        display: block;
    }
    .navphone  li a {
        background: #efefef;
        margin: 0 0;
    }
    .navphone  li > ul li a {
        background: #fff;
    }
    .navphone .open li a,
    .open > .dropdown-menu {
        background: #fff;
        border-color: #fff;
    }
    .navphone .open .dropdown-toggle,
    .navphone .open .dropdown-toggle .caret,
    .navphone .dropdown-toggle:hover,
    .navphone .dropdown-toggle:hover .caret,
    .navphone .dropdown-toggle:active,
    .navphone .dropdown-toggle:focus {
        background: #999;
        color: #efefef;

    }
    .navphone .pinkbloc .dropdown-toggle:hover .caret {
        background:#EB2C7C;
    }
     .dropdown-menu > li > a:hover,
     .dropdown-menu > li > a:focus,
     .dropdown-submenu:hover > a,
     .dropdown-submenu:focus > a {
        background: #999;
        color: #efefef;
        line-height: 20px;
    }
    #blocuser.nav-pills .pull-right {
        margin-left : 0;
        padding-left: 0;
    }
    #usermenuphone {
        display: block;
    }
    #usermenuphone a {
        background: #efefef;
        color: #4F0599
;
    }
    #usermenubtnphone {
        width: 100%;
        border-bottom: 2px solid #fff;
        border-radius: 0;
        background: none;
        color: #000;
        text-align: right;
    }
    #usermenubtnphone:hover {
        color: #000;
        background: none !important;
    }
    #usermenuphone a:hover, #usermenuphone a:focus {
        color: #fff;
        background: #4F0599
 !important;
    }
    .langmenuphone  a {
        display: inline !important;
        background: none;
        padding: 0 2px !important;
        border-radius: 3px;
    }
    #usermenuphone .pull-left {
        float: none;
    }
    #usermenuphone .dropdown-submenu > a:after {
        border: none;
    }
    #nologmenu {
        float: right;
        overflow: hidden;
        width: 75%;
        margin-top: 10px;
    }
    #nologmenu li:first-child {
        width: 50%;
        text-align: center;
        margin-top: 7px;
    }
    #nologmenu li:nth-child(3),
    #nologmenu li:nth-child(4) {
        width: 25%;
    }
    #headend {
        border-bottom: 4px solid #efefef;
    }
    #headdivider {
        border-bottom: 4px solid #efefef;
    }
}
@media (max-width: 480px) {
    #topmenuphone li > a.activebtn:after {
        top: 15px;
    }
    #topmenuphone li > a {
        font-size: 25px;
        height: 30px;
        margin: 9px 2px;
        padding: 1px;
    }
    #nologmenu {
        font-size: 11px
    }
}
@media (max-width: 768px) {

.logo-online small { padding-top: 52px; top: 1px;}
    /* breadcrumb */

    .breadcrumb {
        background: #FAFAFB !important;
        color: #B2B6C3 !important;
    }
    .breadcrumb > li {
        color:#B2B6C3 !important;
        background: transparent !important;
        border-left: none !important;
        position: relative;
    }
    .breadcrumb > li a {
        color:#B2B6C3 !important;
        background: transparent !important;
    }
   .breadcrumb > li:after {
    content: " > ";
    position: absolute;
    top: 0;
    right: 0;
    color: #fff !important;
   }
   .breadcrumb > li:last-child:after {
    content: " ";
   }
   .breadcrumb > li span {
        background: transparent !important;
    }
    .breadcrumb > li a.underline, .breadcrumb > li.active span {
        color: #4F0599 !important;
        background: transparent !important;
    }

}

#btnNow-abuse_form_visit_date {
    display: none;
}

#abuse_form_visit_date select {
    min-width: 90px;
    width: auto;
    margin: 4px;
}

#order_rpn_previous_total_price {
    display: inline-block;
    width: 75px;
}

input[type="text"],
select {
    line-height: 20px;
    padding: 4px 2px 4px 8px;
    border: 1px solid #b9bec1;
    border-radius: 2px;
    font-size: 14px;
    font-family: "roboto", sans-serif;
}
#handle_edit input[type="text"],
#handle_edit select {
    width: 60%;
}
@media (max-width: 1024px) {
    #handle_edit input[type="text"],
    #handle_edit select {
        width: 80%;
    }
}
.btn {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: "roboto", sans-serif;
  font-size: 12px;
  cursor: pointer;
  border: none;
  margin: 0;
  border-radius: 4px;
  text-align: center;
  line-height: 20px;
  padding: 0.5em;
  text-transform: uppercase;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.btn.btn[disabled],
.btn.btn.btn-disabled,
.btn.btn.disabled,
.btn.btn[disabled]:hover,
.btn.btn.btn-disabled:hover,
.btn.btn.disabled:hover,
.btn.btn[disabled]:active,
.btn.btn.btn-disabled:active,
.btn.btn.disabled:active,
.btn.btn[disabled]:focus,
.btn.btn-disabled:focus,
.btn.btn.disabled:focus {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  background-color: #f4f5f6;
  border: 1px solid #FFFFFF;
  color: #b9bec1;
  border: 1px solid #b9bec1;
}
.btn.btn,
.btn.btn:hover {
  text-decoration: none;
  /* [9] */

}
.btn.btn:active,
.btn.btn:focus {
  outline: none;
}
.sticker {
  display: inline-block;
  /* [1] */

  vertical-align: middle;
  /* [2] */

  white-space: nowrap;
  /* [3] */

  font-family: "roboto", sans-serif;
  /* [4] */

  font-size: 100%;
  /* [4] */

  border: none;
  /* [6] */

  margin: 0;
  /* [6] */

  padding-top: 0;
  /* [6] */

  padding-bottom: 0;
  /* [6] */

  line-height: 30px;
  /* [7] */

  padding-right: 1em;
  /* [7] */

  padding-left: 1em;
  /* [7] */

}
.sticker .secondarytxt,
.whitetxt .secondarytxt {
  color: #FFFFFF;
}
/*------------------------------------*\
    $SIZES
\*------------------------------------*/
/**
 * Button size modifiers.
 *
 * These all follow the same sizing rules as above; text is 1em, space around it
 * remains uniform.
 */
.btn--mini,
.btn-mini {
  padding-right: 0.4em;
  padding-left: 0.4em;
  line-height: 10px;
  font-size: 12px;
  margin: 0.1em 0;
}
.btn--small,
.btn-small {
  padding-right: 0.5em;
  padding-left: 0.5em;
  line-height: 20px;
  font-size: 12px;
  margin: 0.2em 0;
}
.btn--large {
  font-size: 16px;
}
.btn--huge {
  padding-right: 2em;
  padding-left: 2em;
  line-height: 5;
  margin: 0.7em 0;
}
/**
 * These buttons will fill the entirety of their container.
 *
 * 1. Remove padding so that widths and paddings don’t conflict.
 */
.btn--full {
  width: 100%;
  padding-right: 0;
  /* [1] */

  padding-left: 0;
  /* [1] */

  text-align: center;
}
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Button font-size modifiers.
 */
.btn--alpha {
  font-size: 3rem;
}
.btn--beta {
  font-size: 2rem;
}
.btn--gamma {
  font-size: 1rem;
}
/**
 * Make the button inherit sizing from its parent.
 */
.btn--natural {
  vertical-align: baseline;
  font-size: inherit;
  line-height: inherit;
  padding-right: 0.5em;
  padding-left: 0.5em;
}
.btn:active {
  background: #f4f5f6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #b9bec1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
/*------------------------------------*\
    $FUNCTIONS
\*------------------------------------*/
/**
 * Button function modifiers.
 */
.btn-primary,
.badge.label-primary,
.label.label-primary,
.btn.btn-primary,
.btn.btn--primary {
  background-color: #4F0599;
  color: #FFFFFF;
  border: 1px solid #4F0599;
}
.badge.label-primary:active,
.label.label-primary:active,
.btn.btn-primary:active,
.btn.btn--primary:active {
  background-color: #420480;
  color: #FFFFFF;
  border: 1px solid #420480;
}
.badge.label-primary:hover,
.label.label-primary:hover,
.btn.btn-primary:hover,
.btn.btn--primary:hover {
  color: #FFFFFF;
}
.btn-secondary,
.badge.label-secondary,
.label.label-secondary,
.btn.btn--secondary {
  background-color: #f16f28;
  color: #FFFFFF;
  border: 1px solid #f16f28;
}
.btn.btn--secondary:active {
  background-color: #e18e68;
  border: 1px solid #e18e68;
  color: #c94a11;
}
.btn.btn--secondary:hover {
  color: #FFFFFF;
  border: 1px solid #e18e68;
}
.btn.btn-pink,
.badge.label-pink,
.label.label-pink,
.btn.btn--tertiary {
  background-color: #eb2c7c;
  border: 1px solid #eb2c7c;
  color: #FFFFFF;
}
.btn.btn--tertiary:active {
  background-color: #d44380;
  border: 1px solid #d44380;
  color: #b91258;
}
.btn.btn--tertiary:hover {
  color: #FFFFFF;
  border: 1px solid #eb2c7c;
}
.btn-info,
.badge.label-info,
.label.label-info,
.btn.btn-info,
.btn--light-blue {
  background-color: #2eade0;
  color: #FFFFFF;
  border: 1px solid #2eade0;
}
.badge.label-info:active,
.label.label-info:active,
.btn.btn-info:active,
.btn--light-blue:active {
  background-color: #420480;
  color: #056088;
  border: 1px solid #420480;
}
.badge.label-info:hover,
.label.label-info:hover,
.btn.btn-info:hover,
.btn--light-blue:hover {
  color: #FFFFFF;
  border: 1px solid #2eade0;
}
/**
 * Positive actions; e.g. sign in, purchase, submit, etc.
 */
.btn-success,
.badge.label-success,
.label.label-success,
.btn.btn-success,
.btn--positive {
  background-color: #3ED3B1;
  border: 1px solid #3ED3B1;
  color: #FFFFFF;
}
.badge.label-success:active,
.label.label-success:active,
.btn.btn-success:active,
.btn--positive:active {
  background-color: #3ED3B1;
  border: 1px solid #3ED3B1;
  color: #FFFFFF;
}
.badge.label-success:hover,
.label.label-success:hover,
.btn.btn-success:hover,
.btn--positive:hover {
  color: #FFFFFF;
  border: 1px solid #3ED3B1;
}
.btn.btn-scw,
.badge.label-scw,
.label.label-scw,
.btn.btn--scw {
  background-color: #27c295;
  border: 1px solid #27c295;
  color: #FFFFFF;
}
.btn.btn-scw:active,
.btn.btn--scw:active {
  background-color: #24b58b;
  border: 1px solid #24b58b;
  color: #178262;
}
.btn.btn-scw:hover,
.btn.btn--scw:hover {
  color: #FFFFFF;
}
/**
 * Negative actions; e.g. close account, delete photo, remove friend, etc.
 */
.btn-danger,
.badge.label-danger,
.label.label-danger,
.btn.btn-danger,
.btn--negative {
  background-color: #EF5774;
  border: 1px solid #EF5774;
  color: #FFFFFF;
}
.badge.label-danger:active,
.label.label-danger:active,
.btn.btn-danger:active,
.btn--negative:active {
  background-color: #EF5774;
  border: 1px solid #EF5774;
  color: #FFFFFF;
}
.badge.label-danger:hover,
.label.label-danger:hover,
.btn.btn-danger:hover,
.btn--negative:hover {
  color: #FFFFFF;
  border: 1px solid #EF5774;
}
.btn,
.btn--default {
  background-color: #FFFFFF;
  border: 1px solid #4F0599;
  color: #4F0599;
}
.btn:active,
.btn--default:active,
.btn--default:focus {
  background-color: #f4f5f6;
  color: #4F0599;
  border: 1px solid #4F0599;
}
.btn:hover,
.btn--default:hover {
  color: #4F0599;
  border: 1px solid #4F0599;
}
.btn--selectize.btn--default:active,
.btn--selectize.btn--default:focus,
.btn--selectize.btn--default:hover {
  border: none;
}
.btn-warning,
.badge.label-warning,
.label.label-warning,
.btn.btn-warning,
.btn--warning {
  background-color: #FF8C69;
  border: 1px solid #FF8C69;
  color: #FFFFFF;
}

.badge.label-warning:active,
.label.label-warning:active,
.btn.btn-warning:active,
.btn--warning:active {
  background-color: #FF8C69;
  border: 1px solid #FF8C69;
  color: #FFFFFF;
}
.badge.label-warning:hover,
.label.label-warning:hover,
.btn.btn-warning:hover,
.btn--warning:hover {
  border: 1px solid #FF8C69;
  color: #FFFFFF;
}
.btn-inverse,
.badge.label-inverse,
.label.label-inverse,
.btn.btn-inverse,
.btn--inverse {
  background-color: #393939;
  border: 1px solid #393939;
  color: #FFFFFF;
}
.badge.label-inverse:active,
.label.label-inverse:active,
.btn.btn-inverse:active,
.btn--inverse:active {
  background-color: #434343;
  border: 1px solid #393939;
  color: #f4f5f6;
}
.badge.label-inverse:hover,
.label.label-inverse:hover,
.btn.btn-inverse:hover,
.btn--inverse:hover {
  border: 1px solid #393939;
  color: #f4f5f6;
}
/**
 * btn social; e.g..
 */
.btn.btn--fb {
  background-color: #3b5998;
  color: #FFFFFF;
}
.btn.btn--fb:active {
  background-color: #1e3159;
  color: #2f497c;
}
.btn.btn--fb:hover {
  color: #FFFFFF;
}
.btn.btn--twit {
  background-color: #46a9e3;
  color: #FFFFFF;
}
.btn.btn--twit:active {
  background-color: #3785b2;
  color: #276589;
}
.btn.btn--twit:hover {
  color: #FFFFFF;
}
/**
 * Inactive, disabled buttons.
 *
 * 1. Make the button look like normal text when hovered.
 */
.btn:hover {
  opacity: 0.8;
}
.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
  background-color: #f4f5f6;
  color: #b9bec1;
  cursor: text;
  /* [1] */

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  opacity: 1;
}
/*------------------------------------*\
    $STYLES
\*------------------------------------*/
/**
 * Button style modifiers.
 *
 * 1. Use an overly-large number to ensure completely rounded, pill-like ends.
 */
.form-actions {
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 19px 20px 20px;
}
.btn-group {
  position: relative;
}
.btn.btn--soft {
  border-radius: 4px;
  /* [1] */

}
.btn.btn--hard {
  border-radius: 0;
}
.selectize {
  width: 180px;
  overflow: hidden;
  height: 40px;
  text-transform: uppercase;
  position: relative;
  margin: 0 auto;
}
.btn.btn--selectize {
  color: #FFFFFF;
  width: 200px;
  *width: 180px;
  border: none;
  text-transform: uppercase;
  -webkit-appearance: none;
  padding-left: 20px;
}
.btn.btn--selectize.btn--default {
  color: #393939;
}
.selectize .glyphicon-chevron-down {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 2;
}
.btn--small .btn--selectize {
  font-size: 12px;
}
/* fixing parent's thin cases for btn and helper*/
.btn {font-weight: normal;}
.normalweight { font-weight: normal}

.popover {
    width: 260px
}

/** Style for list item in AddVlan Form RPN V2**/
form[name = "AddVlan"] .select2-container .select2-selection--multiple{
    height: auto !important;
}


/***********************/
/*     ~ Helpers ~      */
/***********************/
/* positionings */

    /* positions relative */
    .posrel {
        position: relative;
    }
    /* positions absolute */
    .posabs {
        position: absolute;
    }

    /* common sizes 2 move elems */
    .right-10 {
        right: 10px;
    }
    .right-20 {
        right: 20px;
    }
    .right-30 {
        right: 30px;
    }
    .right-70 {
        right: 70px;
    }
    .left-10 {
        left: 10px;
    }
    .left-40 {
        left: 20px;
    }
    .left-40 {
        left: 40px;
    }


/**
Server State
**/

.table-dropdown  {
    position: relative;
}
.table-dropdown table{
    width: 100%;
}
.table-dropdown label{
    margin-top: 5px;
    min-width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.table-dropdown label:after {
  content: ' ▿';
  position: absolute;
  right: 5px;
  top: 5px;
}

.table-dropdown thead, .table-dropdown thead th, .table-dropdown thead td {
    position: relative;
}

.table-dropdown input:checked ~ .table-container {
    animation: dropdown_show_table 0.5s forwards;
}

.table-dropdown input:checked + label:after {
  content: ' ▵';
}

.table-dropdown table {
    height: 0px;
    display: inline-table;
    overflow: hidden;
}
.table-dropdown table th, .table-dropdown table td {
    line-height: 1.5;
}

.table-dropdown span.label {
    font-size: 12pt !important;
}

.network-actions{
    margin-top: 20px;
}

.table-dropdown input[type="checkbox"] {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 40px;
    opacity: 0;
    z-index: 100;
}

.table-dropdown table td {
    vertical-align: middle;
}
.table-dropdown table th {
    text-transform: lowercase;
    padding-left: 5px;
}
.table-dropdown table th span {
    font-weight: normal;
}
.table-dropdown .table-container {
    position: relative;
    overflow: hidden;
}

.table-dropdown .dropdown-line {
    display: none;
}
.table-dropdown button, .table-dropdown a {
    z-index: 102;
}

.table-dropdown input:checked ~ table .dropdown-line{
    display: table-row;
    animation: dropdown_show_table 0.5s forwards;
}

.table-dropdown input ~ table i:before {
    content: '+ ';
    font-size: 10pt;
}
.table-dropdown input ~ table i {
    border-radius: 50px;
    color: #4F0599;
}
.table-dropdown input:checked ~ table i:before {
    content: '- ';
    font-size: 10pt;
}
.table-dropdown thead th, .table-dropdown thead td {
    background-color: #f9f9f9;
    font-size: 16px;
}

@keyframes dropdown_show_table {
    0% {
        opacity: 0;
        height: 0px;
        display: none;
    }
    50% {
        height: 10%;
    }
    100% {
        opacity: 1;
        height: 100%;
        display: inline-block;
    }
}

@media (max-width: 1200px) {
    .span4 table th, .span4 table td {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .ipv6 .table-bordered td {
        border-left: 1px solid #FAFAFB !important;
    }
}
@media (max-width: 979px) and (min-width: 768px) {
    .ip-config .span4 {
        width: 300px;
    }
}
.ipv6 .table-bordered, .ipv6 .table-bordered th, .ipv6 .table-bordered td{
    border-color:#FAFAFB;
}
.ipv6 .table-bordered td {
    border-left: 0px;
}

.Topbanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size : 1.1rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
    height: 70px;
    padding: 5px;
}
.Topbanner__phishing {
    background-color: #E21C3D;
    color: white;
    padding: 0;
    padding-top: 6px;
    height: 40px;
}
.Topbanner__container {
    margin: 0 auto;
    width: auto;
    height: inherit;
}
.Topbanner__container .title {
    font-size: 18px;
    font-weight: 500;
    background: transparent url(/bundles/onlineconsole/images/icon_alert.svg) top left no-repeat;
    padding-left: 35px;
}
.Topbanner__container .text {
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
}
.Topbanner__container a {

    display: block;
    height: inherit;
    color: white;
    padding: 6px 20px;
    text-decoration: none;
    text-align: right;
    background-size: contain;
}
@media (max-width: 767px) {
    .Topbanner__phishing {
        padding: 0;
    }
}

@media (max-width: 1024px){
    .Topbanner {
        justify-content: flex-start;
        height: auto;
    }
}

@media (min-width: 681px) and (max-width: 1024px) {
    .Topbanner {
        padding: 0 20px 20px 20px;
        font-size : 1rem;
    }
}
@media (max-width: 680px) {
    .Topbanner {
        font-size : 1rem;
    }
}
@media (min-width: 680px) {
    .Topbanner__phishing {
        height: 46px;
        padding-top: 11px;
    }
}
@media (max-width: 679px) {
    .Topbanner__container a {
        text-align: center;
        margin-top: 16px;
    }
    .Topbanner__container .title,
    .Topbanner__container .text {
        display: block;
        text-align: center;
    }
}

.alert-warning a {
    color: #FF8C69;
}

.alert-info a {
    color: #4F0599;
}

.alert-error a {
    color: #EF5774;
}

.alert-success a {
    color: #3ED3B1;
}

.background-red {
    background-color: #faf2f2;
}