/* B-BTN-PALETTE (08.10): primary/default button hover = brand orange, borders navy (was teal->green) */
@import url("/css/corporate-popups.css");
/* ====== ALL ORIGINAL CSS + MODERN BUTTON OVERRIDES ====== */
/* Original code preserved — button upgrades added at end    */

/* ----- NEWS ----- */

.item-wrapper {
  background: #fff;
  padding: 25px;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.15);
  border-radius: 7px;
  margin-bottom: 25px;
}

.item-wrapper:last-child {
  margin-bottom: 0;
}

.item-wrapper > .info .date {
  font-size: 12px;
  color: #000;
  display: inline-block;
  vertical-align: top;
}

.item-wrapper > .info .date::after {
  content: "|";
  display: inline-block;
  font-size: 15px;
  color: #dddddd;
  margin: 0 15px;
}

.item-wrapper > .info .head {
  margin: 0px;
  display: inline-block;
  color: #333333;
  max-width: 600px;
  line-height: 1.4em;
}

.short-text {
  display: block;
  font-size: 14px;
  color: #333;
  margin-top: 24px;
}

.item-wrapper > .info a {
  display: inline-block;
  margin-top: 15px;
  float: right;
  background: #0032a1;
  color: #fff;
  line-height: normal;
  padding: 10px 23px;
  margin-left: 10px;
  border-radius: 7px;
  border: 1px solid #fff;
  font-size: 13px;
  text-transform: uppercase;
  transition: all 250ms ease;
  cursor: pointer;
  text-decoration: none;
}

.item-wrapper > .info a:hover {
  background: transparent;
  color: #0033a0;
}

.item-wrapper > .info {
  padding-left: 175px;
}

.item-wrapper > img {
  margin: 0;
}

.item-wrapper .select {
  top: 25px;
  left: 25px;
}

@media screen and (max-width: 800px) {
  .item-wrapper .select {
    left: 50%;
    margin-left: -75px;
  }
  .item-wrapper > img {
    margin: 0 auto;
    float: none;
    display: block;
  }
  .item-wrapper > .info {
    padding-left: 0;
    text-align: center;
  }

  .item-wrapper > .info a {
    float: none;
  }

  .item-wrapper > .info .date::after {
    display: none;
  }
  .item-wrapper > .info .head,
  .item-wrapper > .info .date {
    text-align: center;
  }
  .item-wrapper > .info .date {
    display: block;
    margin: 10px 0;
  }
}

/* ----- NEWS ----- */

/* === TETRAD === */

.table-responsive table > thead > tr > th {
  border-left: 1px solid #FF5722;
  background: linear-gradient(90deg, #2C5364, #0F2027);
}

.table-responsive table > thead > tr > th:first-child {
  border-left: 0;
}

.main-container .table-responsive {
  border-radius: 10px 10px 0 0;
}

.table tr {
  border-bottom: 0;
}

table.table > thead > tr > th,
table.table > tbody > tr > td,
.table th,
.table td,
.list-items table.table > tbody > tr > td {
  padding: 0 25px;
}

.table-responsive table.table tr.info td {
  padding: 25px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  line-height: normal;
  border-top: 0px solid #eee;
}

.table > tbody > tr.info > td {
  border-top: 1px solid #dbecd4;
}

.nav-tabs {
  border-bottom: 4px solid #497ef5;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  border: 0;
}

.nav-tabs > li {
  margin-bottom: 0;
}

.nav-tabs > li > a {
  line-height: normal;
  border: 0;
}

.nav-tabs > li.btn-delete-user a {
  cursor: pointer;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #fff;
  border: 0;
  background-color: #497ef5;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: #fff;
}

.profile-controls .btn {
  background: #0033a0;
  color: #fff;
  line-height: normal;
  padding: 10px 23px;
  border-radius: 10px;
  border: 1px solid #0033a0;
  font-size: 13px;
  text-transform: uppercase;
  transition: all 250ms ease;
  cursor: pointer;
}

.table-control {
  margin: 15px 0;
}

.table-control span.show-on-page {
  font-size: 13px;
  color: #757575;
  display: inline-block;
  margin-top: 8px;
}

.pagination .max-count {
  margin-left: 20px;
}

.statistic h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.statistic tr.item td {
  padding: 15px !important;
}

.profile .statistic span {
  color: #a0a0a0;
  text-transform: uppercase;
}

.profile-edit .form-group {
  display: table;
  width: 100%;
  margin-bottom: 0;
}
.profile-edit .form-group b,
.profile-edit .form-group span {
  display: table-cell;
  width: 50%;
  padding: 10px 0;
  font-size: 14px;
  font-weight: normal;
}

.profile-edit .form-group span:first-child {
  color: #737373;
}

.profile-edit .form-group span:last-child {
  color: #000;
}

.profile-item-info .field-editable {
  color: #2161ef !important;
}
.profile-item-info .field-editable > input {
  padding: 0px 10px;
}

.dashboard .panel.profile .profile-controls .chat-controls {
  padding: 0 20px;
}

.dashboard .tab-content {
  padding: 0;
}

.dashboard .tab-content .profile-item-info,
.dashboard .tab-content .profile-item-notes {
  padding: 15px 0;
}

.dashboard .tab-content .profile-item-correspondence {
  padding: 15px 0 0 0;
}

.dashboard .nav-tabs-custom .tab-content .notes-messages {
  margin: 0 15px;
}

.dashboard .nav-tabs-custom .tab-content .chat-messages {
  margin: 0 15px;
}

.dashboard .nav-tabs-custom .tab-content .chat-controls .message-content {
  width: 85%;
  resize: vertical;
  display: inline-block;
  overflow: auto;
  border-radius: 5px;
  margin-bottom: 0;
  vertical-align: top;
}

.dashboard .nav-tabs-custom .tab-content .chat-controls .pull-right {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 15%;
  float: none !important;
}

.dashboard .nav-tabs-custom .tab-content .chat-controls .pull-right li {
  background: #0032a0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #0032a0;
  font-size: 13px;
  text-transform: uppercase;
  transition: all 250ms ease;
  cursor: pointer;
  height: 54px;
  line-height: 54px;
  width: 90%;
  margin-left: 10px;
}

.dashboard .nav-tabs-custom .tab-content .chat-controls {
  background: #497ef5;
  padding: 15px;
}

.dashboard .info .notes-controls > ul {
  margin-top: -53px;
  margin-right: 100px;
  position: relative;
}

.dashboard .item-created_at {
  font-size: 12px;
  color: #333;
}

.dashboard td span.span-name {
  font-size: 15px;
}

.dashboard td span.span-status {
  font-size: 12px;
  color: #a9a9a9;
  margin-top: 3px;
  display: inline-block;
}

.table-responsive table.dashboard > tbody > tr.head,
.table-responsive table tr {
  box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.table-responsive table.dashboard > tbody > tr.itemcount2,
.table-responsive table tr.itemcount2,
.table-responsive table tr.itemcount2 td.fixed-left,
.table-responsive table tr.itemcount2 td.fixed-right {
  background: #f9f9f9;
}

.table-responsive table tr.itemcount1 {
  background: #fff;
}

.table-responsive table > thead > tr > th > .dropdown-menu {
  background: #c3d600;
  padding: 0;
  left: 0 !important;
  right: 0 !important;
  top: auto;
  position: fixed;
  max-width: 350px;
  margin: 0 auto;
}
/* === TETRAD === */

/* === CHAT === */

.main-container .chat {
  width: 100%;
  display: flex;
}

.chat-users {
  background-color: #356ce6 !important;
  border-radius: 10px 0 0 10px;
  padding: 0;
  overflow: hidden;
  display: table-cell;
  float: none;
  vertical-align: top;
}

.chat-users ul.row {
  margin: 0;
}

.chat-content {
  height: 100%;
  background: #fff;
  border-radius: 0 10px 10px 0;
  display: table-cell;
  float: none;
  vertical-align: bottom;
  box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.15);
}

.chat-users > button {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 2px solid #89abf7;
  font-size: 16px;
  padding: 0;
  background: transparent;
  top: 14px !important;
  right: 8px !important;
}

.chat-users > h3 {
  padding: 23px 25px;
  color: #d3e0fe;
  margin: 0;
  background: #497ef5;
  border-radius: 10px 0 0 0;
  font-size: 16px;
}

.chat-users > ul::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.chat-users > ul::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  box-shadow: 0px 0px 1px 0px #497ef5;
  border-radius: 7px;
}

.chat-users ul li {
  background: #356ce6;
  border-top: 1px solid #497ef5 !important;
  padding: 8px 25px !important;
}

.chat-users > ul > li.active {
  background-color: #2950a8 !important;
}

.chat-users .profile-avatar {
  margin: 0 !important;
  float: none !important;
  vertical-align: middle;
}

.chat-users .profile-avatar > div {
  width: 48px !important;
  height: 48px !important;
}

.profile-data {
  display: inline-block;
  text-align: left;
  max-width: 120px;
  vertical-align: middle;
  color: #fff;
  margin-left: 10px;
}

.chat-content {
  padding: 0;
}

.chat-content .chat-controls {
  background: #497ef5;
  padding: 28px 20px;
  position: relative;
  font-size: 0;
}

.chat-content .chat-controls::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.35);
}

.chat-content .chat-controls .pull-right {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 15%;
  float: none !important;
}

.chat-content .chat-controls .pull-right li {
  background: #fce001;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #fce001;
  font-size: 13px;
  text-transform: uppercase;
  transition: all 250ms ease;
  cursor: pointer;
  height: 54px;
  line-height: 54px;
  width: 100%;
  margin-left: 10px;
}

.chat-content .chat-controls > textarea.form-control {
  width: 85%;
  resize: vertical;
  display: inline-block;
  overflow: auto;
  margin-bottom: 5px;
  border-radius: 5px;
  vertical-align: top;
}

.chat-content .chat-messages {
  padding: 30px;
  margin-bottom: 0;
  border-radius: 0 10px 0 0;
}

.chat-user-search {
  padding: 0 20px;
}

.chat-user-search label {
  margin-bottom: 0;
  color: #fff;
  padding: 10px 25px;
}

.chat-user-search .controls {
  margin-top: 10px;
  padding: 15px 0 !important;
}

.profile-item-chat-msg-content {
  padding: 13px 18px;
  border-radius: 10px;
}

.profile-item-chat-avatar {
  top: 10px;
}

.msg-right > .profile-item-chat-msg-content {
  background-color: #ebfbe5;
  text-align: right;
  overflow: auto;
}
.msg-left > .profile-item-chat-msg-content {
  background-color: #fce9f2;
}

.msg-right > .profile-item-chat-msg-content:before,
.msg-left > .profile-item-chat-msg-content:before {
  display: none;
}

.profile-item-chat-msg-date {
  font-size: 11px;
  color: #adb3b7;
}

@media screen and (max-width: 991px) {
  .main-container .chat,
  .chat-users,
  .chat-content {
    display: block;
  }

  .main-container .row {
    margin: 0;
  }

  .main-container .chat {
    border-radius: 10px;
    overflow: hidden;
  }

  .chat-users,
  .chat-content {
    border-radius: 0;
  }

  .msg-right > .profile-item-chat-msg-content {
    margin-left: 0;
  }
}

@media screen and (max-width: 600px) {
  .msg-right > .profile-item-chat-msg-content,
  .msg-left > .profile-item-chat-msg-content {
    margin-right: 0;
  }

  .profile-item-chat-msg {
    text-align: right;
  }

  .profile-item-chat-msg-content {
    text-align: left;
  }

  .profile-item-chat-msg-date {
    position: static;
  }
}

/* === CHAT === */

/* === PROFILE === */

.item-edit .text-left .form-group .input-group-addon:first-child {
  display: none;
}

.item-edit .text-left .form-group input,
.item-edit .text-left .form-group select {
  border-radius: 4px !important;
  background: #fafafa;
}

.item-edit .text-left .form-group input[type="checkbox"] {
  position: relative;
  margin: 0;
  width: 20px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  -moz-transform: scale(1.2);
  outline: none;
}

.item-edit .text-left .form-group label {
  color: #191919;
  font-size: 13px;
  margin-bottom: 8px;
  padding: 0;
}

.item-edit .text-left .form-group label .flag {
  margin-left: 3px;
}

.item-edit .text-left .form-group .field-multiselect {
  padding-left: 55px;
}

.item-edit .text-left .form-group .field-multiselect .form-control {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.item-edit .text-left .form-group .field-multiselect .input-group-addon {
  display: block;
  position: absolute;
  padding: 0;
  left: 0;
  top: 0;
  background: transparent;
  border: 0;
}

.item-edit .text-left .form-group .field-multiselect .input-group-addon label {
  position: static !important;
  font-weight: normal;
}

.bodypage_profile .main-container .item-edit {
  background: #ffffff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

.main-container .row {
  margin-bottom: 0;
}

.main-container .item-edit .text-center .btn[type="button"] {
  float: right;
  padding: 12px 20px;
  background: #fd6c01;
  border: 0;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 13px;
}

.main-container .item-edit .panel.profile {
  border: 0;
  box-shadow: none;
}
.bodypage_reminders
  .table-responsive-wrapper
  .table-responsive
  .status-read
  td {
  border: none;
}

.profile-name {
  font-size: 20px;
  margin: 25px 0;
}

.profile-info {
  font-size: 15px;
}

.profile-social {
  margin-top: 30px;
}

.profile-social ul li,
.profile-social ul li:hover {
  width: 32px;
  height: 32px;
  font-size: 0;
}

.profile-social ul li > a .fa,
.profile-social ul li:hover > a .fa {
  font-size: 15px;
}

.profile-social ul li[title="Facebook   "] {
  background-color: #3b5998;
}

.profile-social ul li[title="Instagram"] {
  background-color: #517fa4;
}

.profile-social ul {
  border-spacing: 8px 0;
  margin-bottom: 15px;
}

.profile.panel > ul {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 30px;
}

.profile-avatar a,
.profile-social a {
  font-size: 13px;
  color: #fc6c03;
  display: inline-block;
}

.pwd-edit .row .form-group .input-group .input-group-addon:first-child {
  display: none;
}

.pwd-edit .row .form-group .input-group input {
  border-radius: 4px;
  background: #fafafa;
}

.pwd-edit .row .form-group label {
  font-weight: normal;
  font-weight: 13px;
}

.pwd-edit .control-label-wrapper {
  text-align: center;
  position: relative;
  margin: 45px 0 35px;
}

.pwd-edit .control-label-wrapper::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ececec;
}

.pwd-edit .control-label-wrapper label {
  font-weight: bold;
  background: #fff;
  position: relative;
  z-index: 1;
  padding: 0 30px;
  margin-bottom: 0;
}

.pwd-edit .row .text-center {
  margin-top: 20px;
}

.pwd-edit .row .text-center .btn {
  width: 100%;
}

.header-label {
  font-size: 26px;
  text-transform: uppercase;
  color: #000;
  margin: 20px 0 30px;
}

.header-label span {
  font-size: 14px;
  text-transform: none;
  color: #363636;
}

.item-edit .text-left .form-group .field-multi-str-item {
  margin-bottom: 10px;
}
.item-edit .text-left .form-group .field-multi-str-item:last-child {
  margin-bottom: 0;
}

.item-edit .text-left .form-group .field-multi-str-item input {
  border-radius: 4px 0 0 4px !important;
}

.item-edit .text-left .form-group .input-group {
  width: 100%;
}

.modal-body .form-group span {
  margin: 10px 0;
}

.modal-body .form-group .btn span {
  margin: 0;
}

.pwd-edit .row .form-group .input-group {
  width: 100%;
}

/* === PROFILE === */

/* === STEPS === */

.bodypage_guest .main-container {
  padding: 90px 0 0 0;
}

.bodypage_guest .main-container .breadcrumb {
  padding: 0;
}

.guest-wrapper {
  padding-right: 0;
}

.table-steps {
  width: 100%;
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
}

.table-steps td:last-child {
  border-right: 0;
}
.table-steps td {
  /*     width: 20%; */
}
.table-steps td a {
  background: #fdfdfd;
  font-size: 18px;
  font-weight: bold;
  color: #bfbfbf;
  display: block;
  text-align: center;
  padding: 25px 0;
  position: relative;
  text-decoration: none;
  border: 0;
  margin: 0;
  border-radius: 0;
  border: 0px;
  border-right: 1px solid #eee;
  text-transform: uppercase;
}

.bodypage_guest .table-steps td.td-step1 a.btn,
.bodypage_guest .table-steps td.td-step1 a.btn:hover {
  background: #d9016e;
  color: #fff;
}

.bodypage_guest .table-steps td.td-step2 a.btn,
.bodypage_guest .table-steps td.td-step2 a.btn:hover {
  background: #66cc00;
  color: #fff;
}

.bodypage_guest .table-steps td.td-step3 a.btn,
.bodypage_guest .table-steps td.td-step3 a.btn:hover {
  background: #3300ff;
  color: #fff;
}

.bodypage_guest .table-steps td.td-step4 a.btn,
.bodypage_guest .table-steps td.td-step4 a.btn:hover {
  background: #ffc600;
  color: #fff;
}

.bodypage_guest .table-steps td.td-step5 a.btn,
.bodypage_guest .table-steps td.td-step5 a.btn:hover {
  background: #e97314;
  color: #fff;
}
.bodypage_guest .table-steps td.td-step6 a.btn,
.bodypage_guest .table-steps td.td-step6 a.btn:hover {
  background: #e97314;
  color: #fff;
}
.bodypage_guest .table-steps td.td-step1 a.btn.btn-disable,
.bodypage_guest .table-steps td.td-step1 a.btn.btn-disable:hover,
.bodypage_guest .table-steps td.td-step2 a.btn.btn-disable,
.bodypage_guest .table-steps td.td-step2 a.btn.btn-disable:hover,
.bodypage_guest .table-steps td.td-step3 a.btn.btn-disable,
.bodypage_guest .table-steps td.td-step3 a.btn.btn-disable:hover,
.bodypage_guest .table-steps td.td-step4 a.btn.btn-disable,
.bodypage_guest .table-steps td.td-step4 a.btn.btn-disable:hover,
.bodypage_guest .table-steps td.td-step5 a.btn.btn-disable,
.bodypage_guest
  .table-steps
  td.td-step5
  a.btn.btn-disable:hover
  .bodypage_guest
  .table-steps
  td.td-step6
  a.btn.btn-disable,
.bodypage_guest .table-steps td.td-step6 a.btn.btn-disable:hover {
  border: 0;
  background: #fdfdfd;
  color: #bfbfbf;
  margin-left: 0;
}

.guest-wrapper .table-steps td a::after {
  content: "";
  width: 28px;
  height: 19px;
  background-repeat: no-repeat;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -14px;
}

.guest-step4 .input-group .form-control {
  padding: 12px 25px;
  height: 48px;
  font-size: 15px;
  color: #a0a0a0;
  border-radius: 7px 0 0 7px;
}

.guest-step4 .input-group .input-group-addon {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  border-radius: 0 7px 7px 0;
  padding: 15px 25px;
}

/*
.guest-step1 .table-steps td.td-step1 a::after {
  background-image: url(../img/design/guest-step1-elem.png);
        cursor: default;
}
.guest-step2 .table-steps td.td-step2 a::after {
  background-image: url(../img/design/guest-step2-elem.png);
        cursor: default;
}

.guest-step3 .table-steps td.td-step3 a::after {
  background-image: url(../img/design/guest-step3-elem.png);
        cursor: default;
}

.guest-step4 .table-steps td.td-step4 a::after {
  background-image: url(../img/design/guest-step4-elem.png);
        cursor: default;
}

.guest-step5 .table-steps td.td-step5 a::after {
  background-image: url(../img/design/guest-step5-elem.png);
        cursor: default;
}
.guest-step6 .table-steps td.td-step6 a::after {
  background-image: url(../img/design/guest-step5-elem.png);
        cursor: default;
}


.partner-step1 .table-steps td.td-step1 a::after {
  background-image: url(../img/design/guest-step1-elem.png);
        cursor: default;
}
.partner-step2 .table-steps td.td-step2 a::after {
  background-image: url(../img/design/guest-step2-elem.png);
        cursor: default;
}

.partner-step3 .table-steps td.td-step3 a::after {
  background-image: url(../img/design/guest-step3-elem.png);
        cursor: default;
}

.partner-step4 .table-steps td.td-step4 a::after {
  background-image: url(../img/design/guest-step4-elem.png);
        cursor: default;
}

.partner-step5 .table-steps td.td-step5 a::after {
  background-image: url(../img/design/guest-step5-elem.png);
        cursor: default;
}
.partner-step6 .table-steps td.td-step6 a::after {
  background-image: url(../img/design/guest-step6-elem.png);
        cursor: default;
}
*/

.guest-wrapper .td-step5 a.btn-create-first {
  background: #57c0e8 !important;
}

.guest-wrapper .td-step6 a.btn-create-first {
  background: #dff12b !important;
}

.step-info-wrapper {
  margin: 0 40px;
}

.step-info {
  padding: 40px 35px;
  margin: 35px 0;
  color: #000;
  background: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

.step-info h1 {
  margin: 0;
  line-height: 1.4em;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

.step-info p {
  margin: 15px 0 0 0;
  line-height: 1.6em;
}

.guest-step1 .step-info {
  border-left: 7px solid #66cc00;
}
.guest-step2 .step-info {
  border-left: 7px solid #ffc600;
}
.guest-step3 .step-info {
  border-left: 7px solid #3300ff;
}
.guest-step4 .step-info {
  border-left: 7px solid #d8006c;
}
.guest-step5 .step-info {
  border-left: 7px solid #57c0e8;
}

.partner-step1 .step-info {
  border-left: 7px solid #66cc00;
}
.partner-step2 .step-info {
  border-left: 7px solid #ffc600;
}
.partner-step3 .step-info {
  border-left: 7px solid #3300ff;
}
.partner-step4 .step-info {
  border-left: 7px solid #d8006c;
}
.partner-step6 .step-info {
  border-left: 7px solid #57c0e8;
}

.next-step-wrapper {
  text-align: center;
}

.customer-jeunesse .next-step-btn a {
  margin-left: 0px;
}

.customer-jeunesse {
  margin-top: 60px;
}

.webinars-wrapper a.btn-webinar-enter,
.webinars-wrapper a.btn-webinar-register,
.guest-wrapper .control a,
.next-step-btn a {
  font-size: 13px;
  padding: 10px 25px;
  border-radius: 7px;
  position: relative;
  z-index: 1;
  background: #032c88;
  border: 1px solid #eee;
  overflow: hidden;
  text-transform: uppercase;
  margin: 20px 0 0 0;
}

.next-step-btn a.no-active {
  background: #c4c4c4;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
  border-color: #c4c4c4;
}

.webinars-wrapper a.btn-webinar-enter:hover,
.webinars-wrapper a.btn-webinar-register:hover,
.webinars-wrapper a.btn-webinar-enter:active,
.webinars-wrapper a.btn-webinar-register:active,
.guest-wrapper .control a:hover,
.guest-wrapper .control a:active,
.next-step-btn a:hover,
.next-step-btn a:active {
  color: #0032a0;
  border: 1px solid #0032a0;
  box-shadow: none;
}

.webinars-wrapper a.btn-webinar-enter:active,
.webinars-wrapper a.btn-webinar-register:active,
.guest-wrapper .control a:active,
.next-step-btn a:active {
  background-color: #fff;
  box-shadow: none;
  border: 1px solid #0032a0;
}

.webinars-wrapper a.btn-webinar-enter:active:hover,
.webinars-wrapper a.btn-webinar-register:active:hover,
.guest-wrapper .control a:active:hover,
.next-step-btn a:active:hover {
  background: transparent;
  border-color: #0032a0;
  box-shadow: none;
  color: #0032a0;
}

.webinars-wrapper a.btn-webinar-enter:focus,
.webinars-wrapper a.btn-webinar-register:focus,
.guest-wrapper .control a:focus,
.next-step-btn a:focus {
  background: #fff;
  border: 1px solid #0032a0;
  color: #0032a0;
  outline: 0;
}

.webinars-wrapper a.btn-webinar-enter::before,
.webinars-wrapper a.btn-webinar-register::before,
.guest-wrapper .control a::before,
.next-step-btn a::before {
  content: "";
  width: 0px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 250ms ease;
  background: #fff;
  z-index: -1;
}

.webinars-wrapper a.btn-webinar-enter:hover::before,
.webinars-wrapper a.btn-webinar-register:hover::before,
.guest-wrapper .control a:hover::before,
.next-step-btn a:hover::before {
  width: 100%;
}

.step-tabs-list {
  padding: 0;
  margin: 0;
  font-size: 0;
  border-bottom: 14px solid #6c0;
  display: none;
}

.step-tabs-list li {
  list-style: none;
  display: inline-block;
  padding: 30px;
  border-radius: 7px 7px 0 0;
  margin-right: 15px;
  position: relative;
  top: 1px;
}

.step-tabs-list li:last-child {
  margin-right: 0;
}

.step-tabs-list li h3 {
  font-size: 17px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
}

.step-tabs-list li p {
  color: #ffdeee;
  font-size: 13px;
  max-width: 240px;
  margin: 0;
  line-height: 1.6em;
}

.step-tabs-list li.tab-active h3 {
  font-size: 25px;
}

.step-tabs-list li.tab-active p {
  font-size: 14px;
}

.step-tabs-list li p span {
  background: #fff;
  padding: 0 5px;
}

.step-tabs-list li p .span-green {
  color: #66cc00;
}
.step-tabs-list li p .span-purple {
  color: #d8006c;
}

.step-tabs-block {
  background: #fff;
  padding: 0 80px 80px 80px;
  margin-top: -1px;
}

.step-tabs-block .next-step-wrapper {
  text-align: center;
}

.tab-green {
  background-color: #66cc00;
}
.tab-purple {
  background-color: #d8006c;
}

.tab-block-purple {
  display: none;
}

.step-tabs-block h2 {
  margin: 0;
  padding: 65px 0 30px 0;
}

.step-tabs-block h2 span {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  padding-left: 10px;
  text-transform: uppercase;
  border-left: 4px solid #66cc00;
}

.reg-company--video,
.reg-company--pdf {
  padding: 0;
  font-size: 0;
}

.reg-video-in,
.reg-pdf-in {
  position: relative;
}

a.reg-pdf-in {
  display: block;
  margin-left: 15px;
}

a.reg-pdf-in img {
  max-width: 100%;
  object-fit: cover;
  height: 278px;
}

.reg-video-in span {
  background: #efefef;
  width: 195px;
  position: absolute;
  text-align: center;
  color: #989898;
  padding: 15px 0;
  border-radius: 0 0 7px 7px;
  font-size: 15px;
  top: 100%;
  left: calc(50% - 97.5px);
}

.reg-pdf-in span {
  width: 195px;
  position: absolute;
  text-align: center;
  color: #14479a;
  padding: 15px 0;
  border-radius: 0 0 7px 7px;
  font-size: 24px;
  top: 100%;
  left: calc(50% - 97.5px);
}

.step-packages {
  margin-bottom: 45px;
}

.step-packages img {
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  .step-tabs-list li {
    display: block;
    margin-right: 0px;
  }

  .step-tabs-list li:last-child {
    border-radius: 0;
  }

  .step-tabs-block {
    padding: 0 20px 80px 20px;
  }

  .step-tabs-list {
    border-bottom: 0;
  }

  .reg-pdf-in {
    margin: 80px 0 50px 0;
    padding: 0;
  }
}

@media screen and (max-width: 768px) {
  .guest-wrapper .input-group {
    display: block;
  }

  .step-info h1 {
    font-size: 24px;
  }

  .guest-step4 .input-group .form-control {
    border-radius: 7px 7px 0 0;
  }

  .guest-step4 .input-group .input-group-addon {
    border-radius: 0 0 7px 7px;
  }
}

@media screen and (max-width: 600px) {
  .table-steps td a {
    font-size: 10px;
  }
}

/* === STEPS === */

/* === MENU === */

.switch-home .switch-circle {
  background-color: #3a46b4;
}
.switch-settings .switch-circle {
  background-color: #00aef5;
}

.collapse .switch-home .switcher-btn > .switch-circle {
  background-color: #183b56;
}
.collapse .switch-settings .switcher-btn > .switch-circle {
  background-color: #00aef5;
}

.left-menu.menu-home {
  background: linear-gradient(90deg, #2C5364, #0F2027);
}
.left-menu.menu-home .header {
  background: linear-gradient(90deg, #2C5364, #0F2027);
}
.menu-home > .left-menu-wrap > ul li.dropdown.open {
  background: linear-gradient(90deg, #2C5364, #0F2027);
}
.menu-home > .left-menu-wrap > ul li.open > ul.dropdown-menu {
  background: linear-gradient(90deg, #2C5364, #0F2027);
}
.menu-home > .left-menu-wrap > ul li.open > ul.dropdown-menu li {
  border-bottom: #ff572287;
}
.menu-home.menu-home > .left-menu-wrap > ul li.active {
  background-color: #ff572287;
}

.left-menu > .left-menu-wrap > ul li.open > ul.dropdown-menu li.active {
  background: #fd6c01;
}

.left-menu.menu-settings .header {
  background: #0032a1;
}
.left-menu.menu-settings {
  background: #1669f3;
}
.left-menu.menu-settings > .left-menu-wrap > ul li {
  border-bottom: 1px solid #2f79f2;
}
.left-menu.menu-settings > .left-menu-wrap > ul li.active {
  background-color: #125ad2;
}
.menu-settings > .left-menu-wrap > ul li.dropdown.open {
  background: #2174ff;
}
.menu-settings > .left-menu-wrap > ul li.open > ul.dropdown-menu {
  background: #14479a;
}
.menu-settings > .left-menu-wrap > ul li.open > ul.dropdown-menu li {
  border-bottom: 1px solid #1a50a8;
}

.profile-logout a {
  font-size: 24px;
}

.languages {
  float: right;
  margin: 12px 20px 0px 20px;
}

.profile-block {
  padding: 20px 0 0 0;
}

.dropdown-menu {
  right: 0;
  left: inherit;
}

.cleaner {
  clear: both;
  height: 0;
}

/* === MENU === */

/* === FUNNELS === */

.category-list .main {
  padding: 0;
  margin-bottom: 0;
}

.category-list {
  padding: 30px 22.5px 15px 22.5px;
  background: #fff;
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.15);
}

.category-list .content-block .main a {
  margin: 0 7.5px 15px 7.5px;
  position: relative;
  height: 210px;
  overflow: hidden;
}

.webinars-list .table-control {
  height: auto;
}

.webinars-list .table-control .form-group a {
  margin: 0;
}

.category-list .main a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 250ms ease;
}

.category-list .main a:hover::before {
  background: rgba(0, 0, 0, 0.5);
}

.category-list img {
  width: 100%;
  max-width: 100%;
  height: 100% !important;
}

.items-list .main.video p,
.category-list p {
  position: absolute;
  padding: 0;
  color: #ffeb3b;
  bottom: 10px;
  left: 20px;
  transition: all 250ms ease;
  width: auto;
}

.category-list a:hover > p {
  bottom: 50px;
}

.items-list .video p a,
.category-list a:hover p {
  color: #fff;
}

/* === FUNNELS === */

/* WEBINAR */

.webinars-list {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.webinar-in {
  padding: 20px;
  display: table-cell;
  width: 80%;
}

.webinar-in .info h4 {
  color: #0032a0;
  margin: 0;
  padding: 0 0 0 30px;
  line-height: 1.2em;
}

.webinar-in .info h4::before {
  content: "|";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 15px;
  color: #dddddd;
}

.webinar-in .img {
  padding: 0;
}

.webinars-wrapper .webinar-in .presenter-label {
  font-size: 13px;
  color: #909090;
  margin: 15px 0 0 0;
}

.webinar-in .schedule {
  font-size: 12px;
  padding: 0;
}

.webinar-in .presenter .text-center {
  position: relative;
  margin: 5px 0;
}

.webinar-in .presenter .text-center span {
  position: absolute;
  left: calc(50% - 70px);
  background-color: #fbfbfb;
  width: 140px;
  padding: 5px;
  border: 3px solid #eaeaea;
  border-radius: 5px;
  color: #111;
  font-size: 12px;
  top: 130%;
  display: none;
  z-index: 10;
}

.webinar-in .presenter .text-center .presenter-avatar:hover + span {
  display: block;
}

.webinar-in .presenter .text-center span::after {
  content: "";
  position: absolute;
  border: 9px solid #eaeaea;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 0px solid transparent;
  top: -12px;
  left: calc(50% - 5px);
}

.webinar-in .presenter {
  margin-top: 10px;
}

.content-block .webinars-wrapper .control {
  display: table-cell;
  height: 100%;
  vertical-align: top;
  padding: 0;
  border-radius: 0 7px 7px 0;
  padding: 20px 15px;
  width: 20%;
}

.content-block .webinars-wrapper .control h4 {
  font-size: 14px;
  margin: 0 0 5px 0;
}

.content-block .webinars-wrapper .img > img {
  height: 125px;
}

.content-block .webinars-wrapper {
  border: 0 !important;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  background-color: #fff;
  transition: all 250ms ease;
  margin-top: 25px;
}

.content-block .webinars-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.5);
}

.webinars-wrapper a.btn-webinar-enter,
.webinars-wrapper a.btn-webinar-register {
  display: inline-block;
  width: auto;
  padding: 10px 15px;
  margin: 10px 0 0 0;
  font-size: 12px;
}

.home-faq-label {
  position: absolute;
  bottom: 51px;
  left: 15px;
  margin: 0;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  background: #fcc207;
}

.home-faq-label::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 5px solid #fff !important;
  border-left: 5px solid #fff !important;
}

.home-faq-label::before {
  border: 5px solid #d48700;
}

.home-news-label {
  position: absolute;
  bottom: 51px;
  left: 15px;
  margin: 0;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  background: #0032a0;
}

.home-news-label::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 5px solid #fff !important;
  border-left: 5px solid #fff !important;
}

.home-news-label::before {
  border: 5px solid #042879;
}

.home-jeunesse-label {
  position: absolute;
  bottom: 51px;
  left: 15px;
  margin: 0;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  background: #39b5e4;
}

.home-jeunesse-label::before {
  border: 5px solid #238bb3;
}

.home-jeunesse-label::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 5px solid #fff !important;
  border-left: 5px solid #fff !important;
}

.home-vip-label {
  position: absolute;
  bottom: 51px;
  left: 15px;
  margin: 0;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  background: #d8006c;
}

.home-vip-label::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 5px solid #fff !important;
  border-left: 5px solid #fff !important;
}

.home-vip-label::before {
  border: 5px solid #a50354;
}

.webinars-label {
  position: absolute;
  bottom: 0px;
  left: -10px;
  margin: 0;
  padding: 5px;
  color: #fff;
  font-size: 12px;
}

.webinars-label::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 5px solid #fff !important;
  border-left: 5px solid #fff !important;
}

.webinars-label1 {
  background: #66cc01;
}
.webinars-label2 {
  background: #ffba00;
}
.webinars-label3 {
  background: #d8006c;
}

.webinars-label1::before {
  border: 5px solid #66cc01;
}
.webinars-label2::before {
  border: 5px solid #d48700;
}
.webinars-label3::before {
  border: 5px solid #a50053;
}

.webinars-wrapper .presenter-avatar {
  width: 40px !important;
  height: 40px !important;
}

.webinars-wrapper .control .interval > span {
  font-size: 15px !important;
  width: 37px !important;
  height: 37px !important;
  padding: 8px 0 !important;
}

@media screen and (max-width: 1199px) {
  .webinar-in {
    width: 70%;
  }
  .content-block .webinars-wrapper .control {
    width: 30%;
  }
  .webinar-in .info h4::before {
    display: none;
  }
}

@media screen and (max-width: 1178px) {
  .webinar-in,
  .content-block .webinars-wrapper .control {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .webinars-label {
    bottom: inherit;
    top: 10px;
  }

  .content-block .webinars-wrapper .control {
    border-radius: 0;
  }

  .webinar-in .img {
    width: 30%;
  }
  .webinar-in .info {
    width: 70%;
  }

  .webinars-wrapper .img > img {
    max-width: 100%;
    height: auto !important;
  }
}

@media screen and (max-width: 991px) {
  .webinar-in .info {
    margin-top: 15px;
  }

  .webinar-in .schedule,
  .webinar-in .info h4 {
    text-align: center;
  }

  .webinar-in .info h4 {
    padding-left: 0;
    margin-top: 15px;
  }

  .webinar-in .info h4::before {
    display: none;
  }

  .webinars-wrapper .webinar-in .presenter-label {
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 880px) {
  .webinar-in .img,
  .webinar-in .info {
    width: 100%;
    float: none;
  }
}

/* WEBINAR */

/* === NOTIFICATIONS === */

.table-responsive-wrapper .table-responsive table.table > thead > tr > th,
table.table > tbody > tr > td,
.table th,
.table td,
.list-items table.table > tbody > tr > td {
  padding: 0;
}
.table-responsive table > thead > tr:first-child,
.table-responsive table > thead > tr > th:last-child {
  border-top-right-radius: 10px;
}
.table-responsive table > thead > tr > th.fixed-left {
  text-align: center;
  position: absolute;
  line-height: 45px;
  height: 45px;
  border-right: 1px solid #f8f9fb;
  z-index: 1;
  border-top-left-radius: 10px;
}
.table-responsive table > tbody > tr > td.fixed-left {
  height: 40px;
  line-height: 40px;
  border-right: 0;
}
.table-responsive table > tbody > tr > td.fixed-left .btn-action {
  display: inline-block;
  width: 60px;
}
.table-responsive
  table
  > tbody
  > tr
  > td.fixed-left
  .btn-action
  ul.dropdown-menu {
}

.table-responsive table tr td.fixed-right {
  background: transparent !important;
}

.table-responsive table tr:nth-child(even),
.table-responsive table tr:nth-child(even) td.fixed-left {
  background: #f9f9f9;
}

.table-responsive-wrapper .table-responsive table th.fixed-right,
.table-responsive table td.fixed-right {
  border-left: 0 !important;
}

.table-responsive-wrapper .table-responsive table th.fixed-right {
  border-left: 1px solid #FF5722 !important;
}

.table-responsive-wrapper .table-responsive .status-read td {
  border-top: 0;
}

.table-responsive-wrapper .table-responsive table th.fixed-right,
.table-responsive table td.fixed-right {
  position: static;
}

.table-responsive-wrapper {
  padding: 0 !important;
}

.table-responsive-wrapper
  .table-responsive
  .list-items
  table
  > thead
  > tr
  > th {
  padding: 0px 15px 0 15px;
}

.table-responsive-wrapper .table-responsive table.table > thead > tr > th,
table.table > tbody > tr > td,
.table th,
.table td,
.list-items table.table > tbody > tr > td {
  padding: 0px 10px 0 10px;
}

.table-responsive table td.fixed-left,
.table-responsive table td.fixed-right {
  margin-top: 0;
}

.table-responsive-wrapper .table-responsive table tr.row-content td {
  padding: 20px;
}

/* === NOTIFICATIONS === */

/* === MODAL === */

.form .modal-body .form-group .btn-default {
  padding: 0;
  border: 0;
}

.modal-body .form-group .btn {
  background: transparent;
  border: 1px solid #d5e1fc;
  margin-left: 0;
  height: auto;
  padding: 12px;
  border-radius: 5px;
  color: #333 !important;
  box-shadow: none;
  transition: all 250ms ease;
}

.message .modal-body .form-group .btn:hover {
  color: #497ef5 !important;
  border-color: #497ef5;
}

.message .header .menu-left {
  background: #4a7ef6;
  color: #fff;
  padding: 20px 15px;
  /* font-size: 19px; */
}

.message .header .menu-right {
  top: 10px;
  right: 10px;
}

.message .header .menu-right i {
  color: #d4e0fe;
}

.message .content {
  border-radius: 15px;
  overflow: hidden;
}

.message .modal-body .form-group h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 30px 0 20px;
}

.message .modal-body .form-group label {
  margin: 15px 0;
}

.message .modal-body .form-group .row {
  margin: 0;
}

/* === MODAL === */

/* === NAVIGATION === */

nav.navbar-main .logo {
  padding: 0;
}

nav.navbar-main .navbar-brand {
  margin: 20px 0 0 25px;
  padding: 0;
}

/* === NAVIGATION === */

/* === MOBILE NAV === */

.mask-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 10;
}

.mobile-toggle {
  position: fixed;
  top: 25px;
  right: 20px;
  padding: 4px;
  border-radius: 3px;
  display: none;
  cursor: pointer;
  z-index: 10;
}

.mobile-toggle span {
  width: 30px;
  height: 4px;
  background-color: #0032a1;
  display: block;
  margin: 5px auto;
  border-radius: 5px;
  transition: all 200ms linear;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -250px;
  height: 100%;
  width: 220px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  transition: all 500ms cubic-bezier(0.45, 0.1, 0.25, 1.1);
  overflow: auto;
  padding-top: 60px;
  opacity: 0;
}

.mobile-menu .languages {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
}

.mobile-menu .languages .caret {
  margin-left: 15px;
  border-top-color: #fff;
}

.mobile-menu div.item-reminders {
  color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.mobile-menu div.item-reminders::before,
.mobile-menu div.item-reminders::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 50%;
  background: #366ce6;
  transition: all 250ms ease;
  z-index: -1;
  opacity: 0;
}

.mobile-menu div.item-reminders::after {
  top: inherit;
  bottom: 0;
  right: 0;
  left: inherit;
}

.mobile-menu div.item-reminders:hover::after {
  transition-delay: 50ms;
}

.mobile-menu div.item-reminders:hover::before,
.mobile-menu div.item-reminders:hover::after {
  width: 100%;
  opacity: 1;
}

.mobile-menu div.item-reminders a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.open-mobile-menu {
  position: fixed;
  right: 0;
  top: 0;
  opacity: 1;
  transition: all 500ms cubic-bezier(0.45, 0.1, 0.25, 1.1);
}

.close-menu-btn {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: url(../img/close-mob-menu.png) no-repeat;
  transition: all 250ms ease;
}

.close-menu-btn:hover {
  transform: rotate(90deg) scale(0.9);
}

.mobile-menu .profile-settings {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #fff;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 150ms ease-in-out;
  margin: 0 auto 15px auto;
}

.mobile-menu .profile-settings:hover {
  border-color: rgba(216, 0, 108, 0.5);
}

.mobile-menu .profile-settings::before,
.mobile-menu .profile-settings::after {
  display: none;
}

.navbar-header .new-contacts-btn {
  display: inline-block;
}

.main-offset {
  padding-top: 145px;
}

@media screen and (max-width: 955px) {
  .mobile-toggle {
    display: block;
  }

  .navbar-main .navbar-header .profile-block,
  .datetime-block {
    display: none !important;
  }

  .navbar-header .new-contacts-btn {
    margin: 25px 100px 0 0px;
  }
}

@media screen and (min-width: 955px) {
  .mobile-toggle,
  .mobile-menu,
  .mask-bg {
    display: none !important;
  }
}

@media screen and (max-width: 580px) {
  nav.navbar-main {
    height: auto;
  }

  nav.navbar-main .navbar-brand,
  .navbar-header .new-contacts-btn {
    float: none;
  }

  nav.navbar-main .navbar-brand {
    height: auto;
  }

  .navbar-header .new-contacts-btn {
    margin: 15px 0 0 0;
  }

  nav.navbar-main .navbar-header {
    text-align: center;
    padding: 0 0 15px 0;
  }

  .wrap > .main-container,
  .left-menu {
    padding-top: 157px;
  }
}

@media screen and (max-width: 450px) {
  nav.navbar-main .navbar-brand {
    display: block !important;
  }
}

/* === MOBILE NAV === */

.table-control > div.pagination .bg-disable,
.btn-disable:hover,
.btn-disable {
  background-color: #fff;
  border: 0;
  color: #376ce7;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
}

.table-control > div.pagination .bg-primary,
.btn-primary:hover,
.btn-primary {
  background-color: #4a7ef4;
  border: 0;
  color: #fff;
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
  margin-left: 5px;
}

.collapse .switcher-btn {
  display: none;
}

body.collapse .left-menu .header > i {
  right: 16px;
}

.authorize .message .content {
  border-radius: 0px;
}

.authorize .message .header .menu-left {
  background: transparent;
  padding: 0;
}

/* === HELPER === */

.helper {
  padding: 45px 25px;
  background: #0032a1;
  display: none;
}

.helper-wrapper {
  text-align: center;
  position: relative;
}

.helper-wrapper .helper-photo {
  width: 50px;
  height: 50px;
  float: left;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.helper-wrapper .helper-span {
  position: absolute;
  top: 8px;
  left: 47px;
  border: 9px solid #e2d8d6;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
  transform: rotate(-25deg);
}

.helper-wrapper .helper-info {
  padding-left: 65px;
  text-align: left;
}

.helper-wrapper .helper-photo img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.helper-info .need-help {
  background: #feba00;
  display: inline-block;
  padding: 3px 5px;
  color: #10100e;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.helper-info .consult-name {
  font-size: 12px;
  color: #84a0b5;
  margin-top: 8px;
}

.helper-wrapper a.btn {
  background: transparent;
  padding: 12px 30px;
  border: 1px solid #fffefd;
  border-radius: 10px;
  margin-top: 25px;
  transition: all 250ms ease;
}

.helper-wrapper a.help-btn-mobile {
  padding: 12px 0px;
  margin-top: 0;
  width: 40px;
  display: none;
  margin: 0 auto;
}

.helper-wrapper a.help-btn-mobile i {
  font-size: 18px;
  float: none;
}

.helper-wrapper a.btn:hover {
  background: #fff;
  color: #052b80;
}

.body .modal-body {
  padding: 15px;
}

.body .modal-body .helper-form textarea {
  height: 200px;
}

.message-helper .body .modal-body div.btn {
  background: #0032a0;
  border: 1px solid #0032a0;
  text-transform: uppercase;
  transition: all 250ms ease;
}

.message-helper2 .body .modal-body div.btn:hover {
  color: #0032a0;
  background: #fff;
}
.message-helper2 .body .modal-body div.btn {
  background: #0032a0;
  border: 1px solid #0032a0;
  text-transform: uppercase;
  transition: all 250ms ease;
}

.message-helper .body .modal-body div.btn:hover {
  color: #0032a0;
  background: #fff;
}

body.collapse .helper-photo,
body.collapse .helper-info,
body.collapse .helper-wrapper a.btn,
body.collapse .helper-wrapper .helper-span {
  display: none;
}

body.collapse .helper {
  padding: 45px 0;
}

body.collapse .helper-wrapper a.help-btn-mobile {
  display: block;
}
/* === HELPER === */

/*.bodypage_jeunesse .category-list {
    padding: 0;
    background: transparent;
    box-shadow: none;
}*/

.quick-control-buttons button,
.quick-control-buttons a {
  width: 20%;
  display: inline-block;
  font-size: 14px;
  background: #1669f3;
  padding: 15px 10px;
  color: #fff;
  border: 0;
  margin: 0 10px 10px 0;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #1669f3;
  border-radius: 3px;
  transition: all 150ms ease;
}

.quick-control-buttons button:hover,
.quick-control-buttons a:hover {
  background: transparent;
  color: #1669f3;
  border-color: #1669f3;
}

.quick-control-buttons i.fa {
  font-size: 17px;
  vertical-align: text-bottom;
  margin-right: 8px;
}

@media screen and (max-width: 880px) {
  .quick-control-buttons button,
  .quick-control-buttons a {
    width: 33.33%;
  }
}

.paypal-text {
  color: #fff;
  text-align: center;
  margin-top: 15px;
}
.paypal-image {
  margin: 15px 10px 0 10px;
  padding: 0 10px;
}
.paypal-image img {
  max-width: 100%;
}

body.collapse .paypal-text,
body.collapse .paypal-image {
  display: none;
}

.step-info-wrapper5 .step-info .step-info-image {
  float: right;
}

.step-info-wrapper5 .step-info .step-info-text {
  display: inline-block;
  width: 75%;
}

.step-info-wrapper5 .step-title {
  text-align: center;
  font-size: 26px;
  text-transform: uppercase;
}

.sucess_business_system,
.color_block {
  padding: 90px 70px 90px 90px;
  font-size: 0;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
  margin-top: 25px;
}

.color_block {
  background-repeat: no-repeat;
  background-size: cover;
}

.color_block.color_blue {
  background-image: url(../img/design/step5/step5-blue-bg.jpg);
}

.color_block.color_purple {
  background-image: url(../img/design/step5/step5-purple-bg.jpg);
}

.sucess_business_system {
  background: #fff;
}

.color_block .step-block-title,
.color_block .step-block-descr {
  color: #fff;
}

.step-text-side,
.step-image-side {
  display: inline-block;
  vertical-align: top;
}

.step-text-side {
  width: 55%;
}
.step-image-side {
  width: 45%;
}

.step-text-side .step-text-in {
  max-width: 480px;
}

.step-image-side .step-image-in {
  margin-left: 60px;
}
.step-image-side img {
  max-width: 100%;
  display: block;
}

.step-text-side .step-block-title {
  font-size: 33px;
  text-transform: uppercase;
}

.step-text-side .step-block-descr {
  font-size: 14px;
  margin-top: 40px;
  line-height: 1.6em;
}

@media screen and (max-width: 1280px) {
  .step-text-side,
  .step-image-side {
    display: block;
    width: 100%;
  }
  .step-text-side .step-text-in {
    max-width: 100%;
  }
  .color_block.color_blue {
    background-image: none;
    background-color: #0095f7;
  }

  .color_block.color_purple {
    background-image: none;
    background-color: #d8006c;
  }
  .step-image-side .step-image-in {
    margin: 35px 0 0 0;
  }
  .step-image-side .step-image-in img {
    max-width: 330px;
    margin: 0 auto;
  }
  .step-text-side .step-block-title {
    text-align: center;
  }
  .sucess_business_system,
  .color_block {
    padding: 60px;
  }
}

@media screen and (max-width: 1110px) {
  .step-info-wrapper5 .step-info .step-info-text {
    width: 60%;
  }
}

@media screen and (max-width: 860px) {
  .sucess_business_system,
  .color_block {
    padding: 30px;
  }
  .step-info-wrapper5 .step-info .step-info-image {
    display: none;
  }
  .step-info-wrapper5 .step-info .step-info-text {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .step-image-side .step-image-in img {
    max-width: 100%;
  }
  .step-text-side .step-block-title {
    font-size: 24px;
  }
}

/* pay-order-rus-wrap */
.pay-order-rus-wrap {
  position: relative;
  margin-top: 50px;
}

.pay-order-rus-img {
  position: relative;
  text-align: center;
}
/* pay-order-rus-wrap */

#form_send_login_rus {
  margin-top: 15px;
}

/* step-info */
.step-info-wrapper-font_size0 {
}

.step-info-in {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.step-info-video-block {
  position: relative;
  margin: 0 auto;
}

.step-info-text {
  font-size: 14px;
}

.step-info-title {
  text-align: left;
  padding-bottom: 20px;
}

.step-woring-block {
  text-align: left;
  margin-top: 20px;
}

@media screen and (max-width: 850px) {
  .step-info-in {
    width: 100%;
  }
}
/* step-info */

@media screen and (max-width: 750px) {
  .btn.btn-primary.btn-create-first {
    max-width: 100%;
    font-size: 10px;
  }

  .btn.btn-primary.btn-joined-jeunesse {
    max-width: 100%;
    font-size: 10px;
  }

  .btn.btn-danger.input-group-addon {
    font-size: 7px;
  }
}

.training-list .content-block h4 {
  color: #0032a0 !important;
  margin: 0;
  padding: 0 0 0 30px;
  line-height: 1.2em;
  font-size: 16px !important;
}

.training-list .content-block.row:hover {
  transform: scale(1.03);
  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.5);
}

.training-list .content-block {
  margin-bottom: 10px !important;
}

.list-payment .table-Payment\/Packages tr th:nth-child(1),
.list-payment .table-Payment\/Packages tr th:nth-child(2) {
  width: 280px !important;
}

.list-payment .table-Payment\/Packages tr td .item-activate:hover {
  background: #333 !important;
  color: #fce001 !important;
}

.list-payment .table-Payment\/Packages tr td .item-send {
  background: #86a9f7 !important;
  border-color: #86a9f7 !important;
}

.list-payment .table-Payment\/Packages tr td a,
.list-payment .table-Payment\/Packages tr td a i {
  color: #000;
}

/* _______STEPS_______ */

.step_wrapper {
  position: relative;
  margin-top: 60px;
  padding: 0 10px;
}

.step_title_block {
  position: relative;
  text-align: center;
}

.step_title {
  position: relative;
  text-transform: uppercase;
  font-size: 24px;
  font-family: Impact;
  font-weight: bold;
  color: rgb(8, 82, 148);
  margin-bottom: 35px;
}

.step_subtitle_block {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}

.step_subtitle {
  position: relative;
  text-transform: uppercase;
  font-size: 12px;
  font-family: Helvetica Neue;
  font-weight: bold;
  color: #003163;
}

.step1_btn_block {
  position: relative;
  text-align: center;
  margin: 30px 0;
}

.step_video_title_block {
  position: relative;
  text-align: center;
  margin-top: 50px;
}

.step_video_title {
  font-size: 24px;
  color: #0000ff;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-top: 65px;
  font-weight: bold;
}

.button {
  width: auto !important;
}

.row-content br {
  display: none;
}

@media screen and (max-width: 600px) {
  .step_title {
    font-size: 10px;
  }

  .step_subtitle {
    font-size: 8px;
  }

  .step_video_title {
    font-size: 10px;
  }

  .button-wrapper {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .button {
    font-size: 10px;
  }

  .btn.btn-danger.input-group-addon {
    text-align: center !important;
  }

  .table.table-reminders thead {
    display: none;
  }

  .row-content td:nth-child(2) {
    display: none;
  }

  .row-content td:nth-child(3) span {
    font-size: 12px !important;
  }

  .controls button:first-child {
  }

  .row-content:last-child .fixed-left {
    display: none;
  }

  .row-content br {
    display: block;
  }

  .mybuttonwrapper {
    display: flex;
    flex-direction: column;
  }

  .mybuttonwrapper a {
    display: inline-block;
    max-width: 150px;
    margin-bottom: 15px;
  }

  .mybuttonwrapper .btn-primary {
    margin-left: 0;
  }

  .table.dashboard thead {
    display: none;
  }

  .table-responsive table.dashboard > tbody > tr.head,
  .table-responsive table tr {
    box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);
    background: #fff;
  }

  .bodypage_home .item.head.itemcount1 td {
    border: none !important;
  }

  .bodypage_home .item-created_at,
  .bodypage_home .item-country,
  .bodypage_home .item-sales_id {
    display: none;
  }

  .profile-status ul li {
    width: 42px;
  }

  .home-news-label,
  .home-vip-label,
  .home-jeunesse-label,
  .webinars-label1 {
    bottom: auto;
    top: 0;
    left: 0px;
    padding: 1px;
  }

  .home-news-label::before,
  .home-vip-label::before,
  .home-jeunesse-label::before,
  .webinars-label1::before {
    display: none;
  }

  .pwd-edit .row .text-center .btn {
    width: auto;
  }

  .bodypage_profile .main-container .item-edit {
    padding: 10px;
  }

  .wrap > .main-container {
    padding: 57px 20px 40px 20px;
  }

  .main-container .item-edit .text-center .btn[type="button"] {
    float: none;
  }

  .profile-head a {
    bottom: auto;
    right: auto;
    background: #00000054;
    left: 0;
    top: 6px;
    border: none;
  }

  .table.dashboard .head {
    display: flex;
    flex-direction: column;
  }

  .nav.nav-tabs {
    display: flex;
    flex-direction: column;
  }

  .profile-edit .form-group b {
    font-size: 10px;
  }

  .bodypage_referral .table-responsive span {
    display: block;
    margin-bottom: 10px;
    float: none !important;
    margin-left: 10px;
    font-size: 10px;
  }

  .bodypage_referral .item-country {
    display: none !important;
  }

  .table-responsive table tr > td > div {
    width: 100%;
    font-size: 11px;
  }
}

@media screen and (max-width: 400px) {
  .main-container {
    width: 80% !important;
  }

  .main-container .btn {
    font-size: 10px;
  }

  .bodypage_guest .wrap {
    background: #f7f7f7;
  }
}

@media screen and (max-width: 320px) {
  .main-container {
    width: 65% !important;
  }

  .main-container .btn {
    font-size: 10px;
  }
}

@media screen and (max-width: 400px) {
  .main-container {
    width: 100% !important;
  }
  html,
  body {
    min-width: auto;
  }
}
.table-responsive table tr {
  border: none;
}

.main-brands__wrapper {
  position: relative;
  margin: 20px 0;
}

.main-brands__in {
  position: relative;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(7, 1fr);
}

.main-brands__in-block {
  text-align: center;
  position: relative;
}

.main-brands__in-element {
  position: absolute;
  padding: 1rem;
  overflow: hidden;
  opacity: 0;
  z-index: 3;
  bottom: 0;
  top: -16px;
  right: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
}

.main-brands__in .main-brands__in-block:hover .main-brands__in-element {
  opacity: 1;
}

.main-brands__in .main-brands__in-block img {
  transform: scale(1);
  transition: all 0.3s ease-in-out;
}

.main-brands__in .main-brands__in-block .main-brands__in-element img {
  transform: scale(1);
  -webkit-clip-path: polygon(0 0, 0 0, 0 49%, 0 100%, 0 100%);
  clip-path: polygon(0 0, 0 0, 0 49%, 0 100%, 0 100%);
}

.main-brands__in .main-brands__in-block:hover .main-brands__in-element img {
  opacity: 1;
  transform: scale(1);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
}

@keyframes point_pulse2 {
  0% {
    opacity: 0;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(1, 1, 1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.2, 1.6);
  }
}

.list-payment .table-Payment\/Packages .item-activate {
  display: inline-block !important;
  color: #333 !important;
  border: 2px solid #fce001 !important;
  cursor: pointer;
  background: rgb(252, 86, 125) !important;
  background: -moz-linear-gradient(
    top,
    rgba(252, 86, 125, 1) 0%,
    rgba(205, 11, 46, 1) 65%,
    rgba(205, 11, 46, 1) 99%
  ) !important;
  background: -webkit-linear-gradient(
    top,
    rgba(252, 86, 125, 1) 0%,
    rgba(205, 11, 46, 1) 65%,
    rgba(205, 11, 46, 1) 99%
  ) !important;
  background: linear-gradient(
    to bottom,
    rgb(252, 224, 2) 0%,
    rgb(249, 220, 3) 65%,
    rgb(199, 179, 75) 99%
  ) !important;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc567d', endColorstr='#cd0b2e',GradientType=0 ) !important;
  position: relative;
}

.list-payment .table-Payment\/Packages .item-activate:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #fce002;
  animation: point_pulse2 2s linear infinite;
}

.list-payment .table-Payment\/Packages .item-activate:hover {
  background: #333;
  color: #fce001;
}

@media screen and (max-width: 1150px) {
  .main-brands__in {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (max-width: 778px) {
  .main-brands__in {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .main-brands__in {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-responsive table tr > td > div {
    padding: 0;
  }

  .bodypage_dashboard .table-responsive table tr {
    margin-bottom: 20px;
  }

  .bodypage_dashboard .dashboard .head {
    padding-bottom: 35px;
  }
}

@media screen and (max-width: 500px) {
  .main-brands__in {
    grid-template-columns: repeat(1, 1fr);
  }
}

.mobile-toggle {
  display: none;
}

.bodypage_profile .text-left .col-xs-12:nth-child(2) .form-group:nth-child(2) {
  display: none;
}

.bodypage_profile .text-left .col-xs-12:nth-child(2) .form-group:nth-child(5) {
  display: none;
}

.bodypage_profile .text-left .col-xs-12:nth-child(2) .form-group:nth-child(6) {
  display: none;
}

.bodypage_profile .text-left .col-xs-12:nth-child(2) .form-group:nth-child(7) {
  display: none;
}

.bodypage_profile .text-left .col-xs-12:nth-child(1) .form-group:nth-child(7) {
  display: none;
}

.collapse .left-menu .header {
  animation: colorsHeader 30s linear forwards infinite;
}

@keyframes colorsHeader {
  0% {
    background: #183b56;
  }
  20% {
    background: #fd6c01;
  }
  40% {
    background: #183b56;
  }
  60% {
    background: #fd6c01;
  }
  80% {
    background: #183b56;
  }
  90% {
    background: #fd6c01;
  }
  100% {
    background: #183b56;
  }
}

#StripeModal {
  top: 0 !important;
}

.profile-block .chat {
  display: none !important;
}

.wrapper {
  position: relative;
  background-color: #eee;
}

.swiper-container {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.slide-main-title-block {
  background-color: #fd6c01;
  position: absolute;
  bottom: 20%;
  left: 0;
  padding: 20px 20px;
}

.slide-main-title {
  color: #fff;
  font-size: 1.8em;
  font-weight: 400;
}

.slide-main-subtitle {
  color: #fff !important;
  font-size: 1em;
  margin: 0;
  font-weight: 400;
}

.slide-main {
  position: relative;
}

.swiper-slide img {
  max-width: 100%;
  max-height: 610px;
  height: 100%;
  width: 100%;
}

.slide-type-1 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.slide-block__gray-title {
  background-color: #ebebeb;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 15px;
  padding: 20px;
}

.slide-block__container-text-block p {
  font-size: 16px;
  line-height: 1.1;
  margin: 8px 20px;
}

.green-border__block {
  border: 3px solid #3a8360;
  font-size: 16px;
  line-height: 1.3;
  margin: 0 20px;
  padding: 20px;
}

.slide-block__container-img img {
  max-width: 100%;
}

.slide-block__container-text-block {
  margin-top: 0;
}

.slider-wrapper .swiper-pagination-progressbar-fill {
  background-color: #f7941d;
}

.swiper-container-horizontal > .swiper-pagination-progressbar {
  bottom: 75px;
  top: auto;
}

.slide-block__container {
  background-color: #fff;
  position: relative;
}

.slider-wrapper__fraction {
  display: flex;
  margin-top: 30px;
}

.slider-wrapper__fraction-text,
.slider-wrapper__fraction-current,
.slider-wrapper__fraction-sepparator {
  margin-right: 5px;
}

.swiper-pagination-buttons {
  position: absolute;
  width: 100%;
  max-width: 130px;
  margin: 0 auto;
  left: calc(50% - 75px);
  bottom: 40px;
}

.swiper-button-prev:after {
  position: absolute;
  left: 4px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 15px;
}

.swiper-button-next,
.swiper-button-prev {
  height: auto;
  width: auto;
  color: #ffffff;
  background-color: #fd6c01;
  border: solid 1px #fd6c01;
  padding: 5px;
}

.swiper-button-prev {
  padding-left: 18px;
  position: absolute;
  left: 0;
}

.swiper-button-next {
  padding-right: 10px;
}

.swiper-button-next:after {
  position: relative;
  left: 5px;
}

.slide-type-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.slide-type-1 .slide-block__gray-title {
  margin-right: 20px;
}

.slide-main-img_title {
  position: absolute;
  background-color: #337ab7;
  color: #fff;
  padding: 15px 30px;
}

.slide-type-2 .slide-block__container:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-border__block {
  border: 3px solid #3a8360;
  font-size: 16px;
  line-height: 1.3;
  margin: 0 20px;
  padding: 20px;
}

.slide-type-2 .slide-block__gray-title {
  margin-left: 20px;
}

.slide-block__list {
  position: relative;
  list-style: none;
  padding-left: 40px;
  padding-right: 25px;
}

.slide-block__list li {
  position: relative;
  margin-bottom: 5px;
  line-height: 1.1;
}

.slide-block__list li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -15px;
  width: 8px;
  height: 8px;
  background-color: #fd6c01;
  border-radius: 50%;
}

.slide-type-3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
}

.slide-title {
  background: #fff;
  padding: 15px 20px;
  font-size: 24px;
}

.background-white {
  background: #fff;
}

.full-width-text {
  background: #fff;
  padding: 0 20px;
  padding-bottom: 10px;
}

.slide-type-3 img {
  max-height: 497px !important;
}

.slide-type-3 .slide-block__container-text-block p {
  font-size: 14px;
  margin: 5px 20px;
}

.slide-type-3 .slide-block__list li {
  font-size: 14px;
}

b {
  font-weight: bold;
}

.slide-main-img_title-purple {
  position: absolute;
  background-color: #99488f;
  color: #fff;
  padding: 15px 30px;
}

.slide-block__list-purple {
  position: relative;
  list-style: none;
  padding-left: 40px;
  padding-right: 25px;
}

.slide-block__list-purple li {
  position: relative;
  margin-bottom: 7px;
}

.slide-block__list-purple li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -15px;
  width: 8px;
  height: 8px;
  background-color: #99488f;
  border-radius: 50%;
}

.purple-border__block {
  border: 3px solid #99488f;
  font-size: 16px;
  line-height: 1.1;
  margin: 0 20px;
  padding: 10px 20px;
}

.slide-type-4 .slide-block__container:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-type-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.green .slide-main-img_title {
  background: #3a8360;
}

.green li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -15px;
  width: 8px;
  height: 8px;
  background-color: #3a8360;
  border-radius: 50%;
}

.slide-type-5 {
  position: relative;
}

.slider-gal-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.slider-gal__block {
  padding: 5px;
}

.slider-gal__title {
  text-align: center;
  margin-top: 5px;
}

.slider-gal__img img {
  max-height: 210px;
  object-fit: cover;
}

.slider-video {
  position: relative;
}

.slider-video__block {
  position: relative;
}

.slider-video__block {
  height: 545px;
}

.slider-video__block iframe {
  width: 100%;
  height: 100%;
}

.purple .slide-main-img_title {
  background: #99488f;
}

.purple li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -15px;
  width: 8px;
  height: 8px;
  background-color: #99488f;
  border-radius: 50%;
}

.blue .slide-main-img_title {
  background: #337ab7;
}

.blue li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -15px;
  width: 8px;
  height: 8px;
  background-color: #337ab7;
  border-radius: 50%;
}

.slide-row-img-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: hsla(0, 0%, 94.9%, 0.9490196078431372);
  border: 0.2em solid #ccc;
  margin: 0 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  padding: 5px;
  border-radius: 10px;
}

.slide-row-img {
  width: 20%;
  margin-right: 15px;
}

.slide-row-text {
  width: 78%;
}

.slide-type-6 {
  position: relative;
}

.slide-gallery-vertical {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
}

.slide-gallery-vertical-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
}

.slide-gallery-vertical-4 .slide-gallery-vertical__block {
  width: 100%;
}

.slide-gallery-vertical-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}

.slide-gallery-vertical-3 .slide-gallery-vertical__block {
  width: 100%;
}

.slide-gallery-vertical__block-img {
  position: relative;
}

.slide-gallery-vertical__block-img img {
  max-height: 341px;
  object-fit: cover;
}

.slide-gallery-vertical-4 .slide-gallery-vertical__block-img img,
.slide-gallery-vertical-3 .slide-gallery-vertical__block-img img {
  max-height: 341px;
}

.slide-gallery-vertical__block-text {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px 28px;
}

.slide-gallery-vertical .slide-gallery-vertical__block:nth-child(2) {
  margin: 0 10px;
}

.slide-gallery-vertical__block {
  width: 30%;
}

.second-row-text-img .slide-row-img img {
  height: 206px;
}

.one-question-quiz-wrapper {
  position: relative;
  padding-bottom: 80px;
}

.quiz-form {
  position: relative;
  padding: 0 20px;
}

.form-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #eee;
  border-bottom: 1px solid #bfbfbf;
}

.result {
  position: relative;
  padding: 0 20px;
  margin-bottom: 20px;
  color: green;
}

.result span {
  font-weight: bold;
  font-size: 24px;
  margin: 0 10px;
}

.form-check-none {
  visibility: hidden;
  height: 0;
  padding: 0 !important;
}

.form-btn {
  outline: none;
  border: 1px solid #337ab7;
  background: #337ab7;
  color: #fff;
  padding: 20px;
  transition: 250ms;
  margin-top: 25px;
  cursor: pointer;
}

.form-btn:hover {
  background: #fff;
  color: #337ab7;
}

.slide-title {
  font-weight: bold;
}

.radio-big {
  transform: scale(1.5);
}

.slide-block__list li {
  margin-bottom: 5px;
}

.slide-type-3 .slide-block__container-text-block p {
  font-size: 1em;
  margin: 6px 20px;
}

.slider-summery {
  position: relative;
}

.background-blue {
  background-color: #337ab7 !important;
}

.slider-summery .slide-title {
  color: #fff;
  background: transparent;
  padding: 5px 20px;
}

.slider-summery .full-width-text {
  color: #fff;
  background: transparent;
}

.summery-gal-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  padding: 5px 20px;
}

.summery-gal-block {
  position: relative;
}

.summery-gal-block-text {
  background-color: #fff;
  text-align: center;
  font-size: 0.9em;
}

.summery-gal-block-img img {
  height: 120px;
  object-fit: cover;
}

.swiper-slide {
  background-color: #fff;
}

.one-question-quiz-wrapper .slide-title {
  display: block !important;
}

.one-question-quiz-wrapper .full-width-text {
  display: block !important;
}

.second-row-text-img .slide-title {
  display: block !important;
}

.second-row-text-img .full-width-text {
  display: block !important;
}

.always-visible {
  display: block !important;
}

.slider-courses-main-wrapper {
  margin-top: 5px;
}

.swiper-wrapper {
  z-index: 999 !important;
}

.hide-btn-next {
  position: absolute;
  bottom: -70px;
  left: 48%;
  background: #f7f7f7;
  width: 65px;
  height: 48px;
  z-index: 9999999;
}

.success-popup-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0000005e;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.error-popup-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0000005e;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.success-popup__text {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  color: green;
}

.error-popup__text {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  color: crimson;
}

.success-popup__in {
  position: relative;
  background: #fff;
  padding: 20px;
  width: 300px;
  text-align: center;
}

.error-popup__in {
  position: relative;
  background: #fff;
  padding: 20px;
  width: 300px;
  text-align: center;
}

.success-popup__btn-block {
  text-align: center;
}

.success-popup__btn {
  display: inline-block;
  outline: none;
  border: 1px solid #337ab7;
  background: #337ab7;
  color: #fff;
  padding: 15px;
  transition: 250ms;
  margin-top: 25px;
  cursor: pointer;
}

.error-popup-close {
  position: absolute;
  top: -7px;
  right: 3px;
  width: 20px;
}

.error-popup-close span:nth-child(2) {
  width: 100%;
  height: 2px;
  background: red;
  display: block;
  transform: rotate(-43deg);
  top: 19px;
  left: 0;
  position: absolute;
}

.error-popup-close span:nth-child(1) {
  width: 100%;
  height: 2px;
  background: red;
  display: block;
  transform: rotate(43deg);
  top: 19px;
  left: 0;
  position: absolute;
}

.end-slide-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: green !important;
}

.end-slide__title {
  font-size: 24px;
  margin-bottom: 10px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
}

.end-slide__text {
  font-size: 16px;
  padding: 10px;
  color: #fff;
}

.slide-one-height {
  background: #fff;
  overflow: hidden;
  height: 600px;
}

.table-steps td a.btn {
  border: 1px solid #eee !important;
}

.top-progress-bar-wrapper {
  position: relative;
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
  margin: 10px 0;
}

.top-progress-bar-progress {
  position: absolute;
  top: 0;
  left: 0;
  background: #337ab7;
  width: 25%;
  height: 5px;
}

.next-module-wrapper {
  position: absolute;
  bottom: -59px;
  left: calc(50% - 9px);
  display: inline-block;
  z-index: 9999999;
  background: #337ab7;
  color: #fff;
  padding: 5.5px 13px;
}

a.next-module-wrapper:hover {
  color: #fff;
}

@media screen and (max-width: 1050px) {
  .slider-summery .slide-title {
    padding: 0px 20px;
  }

  .summery-gal-wrapper {
    grid-gap: 10px;
  }

  .form-btn {
    padding: 13px 20px;
  }

  .form-check {
    padding: 15px 20px;
  }
}

@media screen and (max-width: 1024px) {
  .slide-gallery-vertical__block-img img {
    max-height: 329px !important;
  }

  .slide-gallery-vertical__block-text {
    font-size: 0.9em;
  }

  .one-question-quiz-wrapper {
    position: relative;
    padding-bottom: 52px;
  }

  .slider-video__block {
    height: 518px;
  }

  .slide-block__container-text-block p {
    line-height: 1;
  }

  .slide-type-3 .slide-block__list li {
    line-height: 1;
  }

  .summery-gal-block-img img {
    height: 134px;
  }

  .slide-title {
    padding: 8px 20px;
  }

  .slider-gal__img img {
    max-height: 194px;
    object-fit: cover;
  }

  .swiper-slide img {
    max-height: 520px;
  }

  .slide-type-3 img {
    max-height: 461px !important;
  }

  .slide-block__list {
    padding-left: 20px;
    padding-right: 8px;
  }

  .slide-type-2 .slide-block__gray-title {
    margin-left: 8px;
    padding: 10px;
  }

  .slide-block__gray-title {
    margin-left: 8px;
    padding: 10px;
  }

  .slide-block__list li {
    margin-bottom: 5px;
    line-height: 1.1;
  }

  .form-check {
    padding: 13px 20px;
  }
}

@media screen and (max-width: 925px) {
  .slide-type-3 .slide-block__container-text-block p,
  .slide-title,
  .slide-type-3 .slide-block__list li,
  .slide-block__gray-title,
  .slide-block__container-text-block p,
  .green-border__block,
  .slide-main-img_title,
  .full-width-text,
  .slide-row-text,
  .slide-block__list li,
  .slider-gal__title,
  .slide-block__list-purple li,
  .purple-border__block,
  .blue-border__block,
  .summery-gal-block-text,
  .result,
  .slide-gallery-vertical__block-text {
    font-size: 0.7em !important;
  }

  .swiper-slide img {
    max-height: 434px;
    object-fit: cover;
  }

  .slider-video__block {
    height: 395px;
  }

  .slider-gal__img img {
    max-height: 140px;
    object-fit: cover;
  }

  .slide-type-3 img {
    max-height: 348px !important;
  }

  .slide-row-img img {
    max-height: inherit;
    object-fit: cover;
    height: 69px;
  }

  label.form-check-label {
    font-size: 8px;
  }

  .slide-one-height {
    height: 365px;
    overflow-y: scroll;
  }

  .next-module-wrapper {
    bottom: -60px;
  }
}

@media screen and (max-width: 806px) {
  .slide-block__list li {
    margin-bottom: 8px;
  }

  .slide-row-img {
    width: 15%;
  }

  .slide-row-text {
    width: 70%;
  }

  .swiper-slide img {
    max-height: 422px;
  }

  .slider-video__block {
    height: 383px;
  }

  .purple-border__block,
  .blue-border__block {
    padding: 5px;
  }

  .slider-gal__img img {
    height: 100px;
  }

  .slide-type-3 .slide-block__container-text-block p,
  .slide-title,
  .slide-type-3 .slide-block__list li,
  .slide-block__gray-title,
  .slide-block__container-text-block p,
  .green-border__block,
  .slide-main-img_title,
  .full-width-text,
  .slide-row-text,
  .slide-block__list li,
  .slider-gal__title,
  .slide-block__list-purple li,
  .purple-border__block,
  .blue-border__block,
  .summery-gal-block-text,
  .result,
  .slide-gallery-vertical__block-text {
    font-size: 0.6em !important;
  }
}

@media screen and (max-width: 768px) {
  .second-row-text-img .slide-row-img img {
    height: 117px;
  }

  .slide-gallery-vertical__block-img img {
    max-height: 216px !important;
  }

  .summery-gal-block-img img {
    height: 78px;
  }

  .form-check {
    padding: 2px 20px;
  }

  .slide-gallery-vertical__block-text {
    padding: 5px;
  }

  .slide-block__list li {
    line-height: 1;
  }

  .slider-video__block {
    height: 313px;
  }

  .slider-gal__img img {
    height: 119px;
  }

  .slide-type-3 img {
    max-height: 303px !important;
  }

  .slide-block__list-purple li {
    line-height: 1;
  }

  .swiper-slide img {
    max-height: 285px;
  }

  .slider-video__block {
    height: 337px;
  }

  .wrapper .swiper-slide img:nth-child(6),
  .wrapper .swiper-slide img:nth-child(11),
  .wrapper .swiper-slide img:nth-child(13) {
    height: 300px;
  }

  .second-row-text-img .slide-row-img img {
    height: 125px !important;
  }

  .slide-gallery-vertical__block-img img {
    max-height: 213px !important;
  }

  .one-question-quiz-wrapper {
    position: relative;
    padding-bottom: 5px;
  }

  .summery-gal-block-img img {
    height: 54px;
  }

  .slide-row-img-text {
    margin-bottom: 22px;
  }

  .slide-block__gray-title {
    padding: 5px 20px;
  }

  .slide-block__list {
    padding-left: 20px;
    padding-right: 4px;
  }

  .slide-block__list li {
    margin-bottom: 3px;
  }

  .slide-block__container-text-block p {
    margin: 5px 20px;
  }

  .form-btn {
    margin-top: 5px;
    padding: 5px 20px;
  }

  .radio-big {
    transform: scale(1);
  }

  .summery-gal-wrapper {
    grid-gap: 9px;
    padding-bottom: 33px;
  }

  .slide-one-height {
    height: 285px;
  }
}

@media screen and (max-width: 717px) {
  .hide-btn-next {
    bottom: -70px;
  }

  .swiper-pagination-buttons {
    bottom: 12px !important;
  }

  .slide-main-title-block {
    padding: 5px 10px;
  }

  .hide-btn-next {
    bottom: -93px !important;
  }

  .next-module-wrapper {
    position: absolute;
    bottom: -88px !important;
    padding: 8px 5px !important;
    font-size: 12px;
  }
}

@media screen and (max-width: 651px) {
  .slide-title {
    padding: 5px 20px;
  }

  .slide-type-3 .slide-block__container-text-block p,
  .slide-title,
  .slide-type-3 .slide-block__list li,
  .slide-block__gray-title,
  .slide-block__container-text-block p,
  .green-border__block,
  .slide-main-img_title,
  .full-width-text,
  .slide-row-text,
  .slide-block__list li,
  .slider-gal__title,
  .slide-block__list-purple li,
  .purple-border__block,
  .blue-border__block,
  .summery-gal-block-text,
  .result,
  .slide-gallery-vertical__block-text {
    font-size: 0.5em !important;
  }

  .swiper-slide img {
    max-height: 410px;
  }

  .swiper-pagination-buttons {
    left: calc(50% - 28px);
  }

  .slide-type-3 .slide-block__container-text-block p {
    margin: 5px;
  }

  .swiper-slide img {
    max-height: 265px;
  }

  .hide-btn-next {
    bottom: -68px;
    left: 56%;
    width: 100px;
  }

  .next-module-wrapper {
    left: calc(50% - -38px);
  }
}

@media screen and (max-width: 540px) {
  .hide-btn-next {
    bottom: -74px;
    left: 59%;
  }

  .slide-main-title {
    color: #fff;
    font-size: 1.2em;
    font-weight: 400;
  }
}

@media screen and (max-width: 515px) {
  .slide-block__container-text-block p {
    margin: 5px;
  }

  .slide-type-2 .slide-block__gray-title {
    margin-left: 5px;
  }

  .slide-row-img img {
    height: 50px;
  }

  .purple li:before {
    content: "";
    position: absolute;
    top: 2px;
    left: -15px;
    width: 4px;
    height: 4px;
    background-color: #99488f;
    border-radius: 50%;
  }

  .slider-video__block {
    height: 320px;
  }

  .slide-block__list li:before {
    content: "";
    position: absolute;
    top: 2px;
    left: -15px;
    width: 4px;
    height: 4px;
    background-color: #337ab7;
    border-radius: 50%;
  }

  .slide-block__list-purple li:before {
    content: "";
    position: absolute;
    top: 2px;
    left: -15px;
    width: 4px;
    height: 4px;
    background-color: #99488f;
    border-radius: 50%;
  }

  .slider-video__block {
    height: 288px;
  }

  .slide-block__list-purple li {
    position: relative;
    margin-bottom: 4px;
  }

  .slide-block__gray-title {
    padding: 5px 20px;
  }

  .slider-gal-wrapper {
    grid-gap: 0;
  }

  .slide-type-3 img {
    max-height: inherit !important;
  }

  .slide-type-3 .slide-block__container-text-block p,
  .slide-title,
  .slide-type-3 .slide-block__list li,
  .slide-block__gray-title,
  .slide-block__container-text-block p,
  .green-border__block,
  .slide-main-img_title,
  .full-width-text,
  .slide-row-text,
  .slide-block__list li,
  .slider-gal__title,
  .slide-block__list-purple li,
  .purple-border__block,
  .blue-border__block,
  .summery-gal-block-text,
  .result,
  .slide-gallery-vertical__block-text {
    font-size: 0.4em !important;
  }

  .slide-block__list li:before,
  .slide-block__list-purple li:before,
  .slide-block__list li:before,
  .purple li:before {
    top: 3px;
    left: -8px;
    width: 2px;
    height: 2px;
  }

  .slide-block__list,
  .slide-block__list-purple {
    padding-left: 15px;
    padding-right: 5px;
  }

  .purple-border__block {
    margin: 0 5px;
  }

  .green-border__block {
    border: 2px solid #3a8360;
    font-size: 16px;
    line-height: 1.3;
    margin: 0px 5px;
    padding: 5px;
  }

  .blue-border__block {
    margin: 0 5px;
  }

  .slide-block__gray-title {
    margin-bottom: 5px;
  }

  .swiper-slide img {
    max-height: inherit;
    height: 215px;
  }

  .slide-row-img img {
    height: 56px !important;
  }

  .slider-gal__img img {
    height: 100px !important;
  }

  .slide-title,
  .full-width-text {
    display: block;
  }

  .slide-row-img-text {
    margin-bottom: 27px;
  }

  .slider-gal__block {
    margin-bottom: 23px;
  }

  .summery-gal-block-img img {
    height: 66px !important;
  }

  .second-row-text-img .slide-row-img img {
    height: 98px !important;
  }

  .slide-row-img-text {
    margin-bottom: 13px;
  }

  .form-btn {
    padding: 10px;
    margin-top: 8px;
  }

  .summery-gal-wrapper {
    grid-gap: 5px;
    padding-bottom: 6px;
  }

  .one-question-quiz-wrapper {
    padding-bottom: 12px;
  }

  .slide-gallery-vertical__block-img img {
    max-height: 198px !important;
  }

  .slide-main-img_title {
    padding: 15px 8px;
  }

  .next-module-wrapper {
    position: absolute;
    bottom: -60px;
    padding: 7px 5px;
    font-size: 12px;
  }
}

@media screen and (max-width: 430px) {
  .summery-gal-wrapper {
    grid-gap: 4px;
  }

  .hide-btn-next {
    bottom: -75px;
    left: 62%;
  }

  .slide-one-height {
    height: 220px;
  }
}

@media screen and (max-width: 376px) {
  .slide-block__gray-title {
    padding: 5px 5px;
  }

  .slide-type-3 .slide-block__container-text-block p,
  .slide-title,
  .slide-type-3 .slide-block__list li,
  .slide-block__gray-title,
  .slide-block__container-text-block p,
  .green-border__block,
  .slide-main-img_title,
  .full-width-text,
  .slide-row-text,
  .slide-block__list li,
  .slider-gal__title,
  .slide-block__list-purple li,
  .purple-border__block,
  .blue-border__block,
  .summery-gal-block-text,
  .result,
  .slide-gallery-vertical__block-text {
    font-size: 0.3em !important;
  }

  label.form-check-label {
    font-size: 6px;
    max-width: 130px;
  }

  .slider-wrapper__fraction-text,
  .slider-wrapper__fraction-current,
  .slider-wrapper__fraction-sepparator {
    margin-right: 2px;
  }

  .summery-gal-wrapper {
    grid-gap: 7px;
    padding-bottom: 29px;
  }
}

.correct {
  color: green;
  background: #fff;
  padding: 10px;
}
.incorrect {
  color: red;
  background: #fff;
  padding: 10px;
}

.new-test-result {
  font-weight: bold;
  color: green;
  font-size: 18px;
  margin-top: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0000009c;
  display: none;
}

.new-test-result-close {
  position: absolute;
  top: 28px;
  right: 35px;
  cursor: pointer;
  background: transparent;
  outline: none;
  box-shadow: none;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-test-result-close span:first-child {
  display: inline-block;
  width: 40px;
  height: 3px;
  background: #fff;
  position: absolute;
  transform: rotate(45deg);
}
.new-test-result-close span:last-child {
  display: inline-block;
  width: 40px;
  height: 3px;
  background: #fff;
  position: absolute;
  transform: rotate(-45deg);
}

.percentage-result-wrapper {
  padding: 0 20px;
  color: green;
  font-size: 20px;
  z-index: 10;
  position: relative;
  background: #fff;
  display: inline-block;
}

.percentage-result-wrapper .percentage-result {
  font-weight: bold;
}


/* ##################################################################
   ##################################################################
   ##                                                              ##
   ##   BUTTON OVERRIDES v3 — clean, separated orange/blue          ##
   ##   Orange: STUDY, Activate Course  |  Blue: Send Key           ##
   ##################################################################
   ################################################################## */


/* ---- Icon removal: hide ONLY the icon element, never the button ---- */
/* .btn > i,
.btn > .fa,
.btn > .fas,
.btn > .far,
.btn > .glyphicon,
.btn > svg,
.item-wrapper > .info a > i,
.item-wrapper > .info a > .fa,
.item-wrapper > .info a > .fas,
.item-wrapper > .info a > .far,
.item-wrapper > .info a > svg {
  display: none !important;
} */

/* ================================================================
   ORANGE — STUDY, Activate Course, CTAs   (#fd6c01 delicate)
   ================================================================ */

/* All info links = orange by default (STUDY + Activate Course) */
.item-wrapper > .info a,
.item-wrapper > .info a.btn,
.item-wrapper > .info .btn-warning,
/* Other CTA buttons */
.main-container .item-edit .text-center .btn[type="button"],
.next-step-btn a:not(.no-active),
.guest-wrapper .control a:not(.no-active),
.webinars-wrapper a.btn-webinar-enter,
.webinars-wrapper a.btn-webinar-register,
.guest-step4 .input-group .input-group-addon,
.btn.btn-danger.input-group-addon,
.guest-wrapper .td-step5 a.btn-create-first,
.guest-wrapper .td-step6 a.btn-create-first,
.bodypage_guest .table-steps td.td-step5 a.btn:not(.btn-disable),
.bodypage_guest .table-steps td.td-step6 a.btn:not(.btn-disable),
.list-payment .table-Payment\/Packages .item-activate,
/* Chat send */
.dashboard .nav-tabs-custom .tab-content .chat-controls .pull-right li,
.chat-content .chat-controls .pull-right li,
/* Slider nav */
.swiper-button-next,
.swiper-button-prev {
  background: #fd6c01 !important;
  color: #fff !important;
  border: 1px solid #e55b00 !important;
  box-shadow: 0 1px 2px rgba(253, 108, 1, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 400;
  font-size: 12px;
  transition: all 180ms ease;
}

/* Orange hover */
.item-wrapper > .info a:hover,
.item-wrapper > .info a.btn:hover,
.main-container .item-edit .text-center .btn[type="button"]:hover,
.next-step-btn a:not(.no-active):hover,
.guest-wrapper .control a:not(.no-active):hover,
.webinars-wrapper a.btn-webinar-enter:hover,
.webinars-wrapper a.btn-webinar-register:hover,
.guest-step4 .input-group .input-group-addon:hover,
.btn.btn-danger.input-group-addon:hover,
.guest-wrapper .td-step5 a.btn-create-first:hover,
.guest-wrapper .td-step6 a.btn-create-first:hover,
.bodypage_guest .table-steps td.td-step5 a.btn:not(.btn-disable):hover,
.bodypage_guest .table-steps td.td-step6 a.btn:not(.btn-disable):hover,
.list-payment .table-Payment\/Packages .item-activate:hover,
.dashboard .nav-tabs-custom .tab-content .chat-controls .pull-right li:hover,
.chat-content .chat-controls .pull-right li:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #e55b00 !important;
  border-color: #d45200 !important;
  box-shadow: 0 2px 6px rgba(253, 108, 1, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Orange active */
.item-wrapper > .info a:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(253, 108, 1, 0.1) !important;
}

/* ---- Next step slide effect radius fix ---- */
.webinars-wrapper a.btn-webinar-enter::before,
.webinars-wrapper a.btn-webinar-register::before,
.guest-wrapper .control a::before,
.next-step-btn a::before {
  border-radius: 6px !important;
}

/* ---- Step nav colours ---- */
.bodypage_guest .table-steps td.td-step1 a.btn:not(.btn-disable),
.bodypage_guest .table-steps td.td-step1 a.btn:not(.btn-disable):hover {
  background: #d9016e !important; border-color: #c40161 !important;
  box-shadow: 0 1px 3px rgba(217, 1, 110, 0.2) !important; font-weight: 400;
}
.bodypage_guest .table-steps td.td-step2 a.btn:not(.btn-disable),
.bodypage_guest .table-steps td.td-step2 a.btn:not(.btn-disable):hover {
  background: #66cc00 !important; border-color: #5bb800 !important;
  box-shadow: 0 1px 3px rgba(102, 204, 0, 0.2) !important; font-weight: 400;
}
.bodypage_guest .table-steps td.td-step3 a.btn:not(.btn-disable),
.bodypage_guest .table-steps td.td-step3 a.btn:not(.btn-disable):hover {
  background: #3300ff !important; border-color: #2d00e0 !important;
  box-shadow: 0 1px 3px rgba(51, 0, 255, 0.2) !important; font-weight: 400;
}
.bodypage_guest .table-steps td.td-step4 a.btn:not(.btn-disable),
.bodypage_guest .table-steps td.td-step4 a.btn:not(.btn-disable):hover {
  background: #ffc600 !important; border-color: #e5b200 !important;
  color: #333 !important;
  box-shadow: 0 1px 3px rgba(255, 198, 0, 0.2) !important; font-weight: 400;
}

/* Disabled steps */
.bodypage_guest .table-steps td a.btn.btn-disable,
.bodypage_guest .table-steps td a.btn.btn-disable:hover {
  background: #f5f5f5 !important; color: #bbb !important;
  border: 1px solid #e0e0e0 !important; box-shadow: none !important;
  transform: none !important; cursor: not-allowed; opacity: 0.7;
}

/* ---- Item activate pulse ---- */
.list-payment .table-Payment\/Packages .item-activate::before {
  border-color: rgba(253, 108, 1, 0.3) !important;
  animation: orangePulse 2.5s linear infinite !important;
}
@keyframes orangePulse {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ================================================================
   BLUE — Send Key, primary actions   (#1B3E63 -> #0f2b0c)
   ================================================================ */

/* Send Key = .btn-primary or .btn-info inside .info */
.item-wrapper > .info a.btn-primary,
.item-wrapper > .info a.btn-info,
.item-wrapper > .info .btn-primary,
.item-wrapper > .info .btn-info,
/* Profile / controls */
.profile-controls .btn,
/* Pagination */
.table-control > div.pagination .bg-primary,
.btn-primary,
/* Quick buttons */
.quick-control-buttons button,
.quick-control-buttons a,
/* Modal buttons */
.modal-body .form-group .btn,
.message .modal-body .form-group .btn,
/* Helper */
.helper-wrapper a.btn,
.helper-wrapper a.help-btn-mobile,
.message-helper .body .modal-body div.btn,
.message-helper2 .body .modal-body div.btn,
/* Form */
.form-btn,
/* Success popup */
.success-popup__btn,
/* Table actions */
.table-responsive table > tbody > tr > td.fixed-left .btn-action,
/* Payment item-send */
.list-payment .table-Payment\/Packages tr td .item-send {
  background: linear-gradient(135deg, #1B3E63 0%, #012353 100%) !important;
  color: #fff !important;
  border: 1px solid #012353 !important;
  box-shadow: 0 1px 2px rgba(15, 43, 12, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 400;
  font-size: 12px;
  transition: all 180ms ease;
}

/* Blue hover */
.item-wrapper > .info a.btn-primary:hover,
.item-wrapper > .info a.btn-info:hover,
.profile-controls .btn:hover,
.table-control > div.pagination .bg-primary:hover,
.btn-primary:hover,
.quick-control-buttons button:hover,
.quick-control-buttons a:hover,
.modal-body .form-group .btn:hover,
.message .modal-body .form-group .btn:hover,
.helper-wrapper a.btn:hover,
.helper-wrapper a.help-btn-mobile:hover,
.message-helper .body .modal-body div.btn:hover,
.message-helper2 .body .modal-body div.btn:hover,
.form-btn:hover,
.success-popup__btn:hover,
.table-responsive table > tbody > tr > td.fixed-left .btn-action:hover,
.list-payment .table-Payment\/Packages tr td .item-send:hover {
  background: linear-gradient(135deg, #fd6c01 0%, #e55a00 100%) !important;
  border-color: #d14d00 !important;
  box-shadow: 0 2px 6px rgba(15, 43, 12, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---- Quick buttons padding fix ---- */
.quick-control-buttons button,
.quick-control-buttons a {
  padding: 10px 8px;
}

/* ---- Pagination ---- */
.table-control > div.pagination .bg-primary {
  padding: 6px 12px; margin-left: 5px;
}
.table-control > div.pagination .bg-disable,
.btn-disable,
.btn-disable:hover {
  background: #f0f0f0 !important; color: #999 !important;
  border: 1px solid #ddd !important; box-shadow: none !important;
  border-radius: 5px !important; padding: 6px 12px;
  font-size: 12px; font-weight: 400; cursor: not-allowed;
}

/* ---- Slider nav ---- */
.swiper-button-next,
.swiper-button-prev {
  min-width: 34px; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 13px !important; font-weight: 400; color: #fff !important;
}

/* ---- Step 1 button ---- */
.step1_btn_block .button {
  padding: 10px 24px;
  text-transform: uppercase;
}

/* ---- Modal buttons ---- */
.modal-body .form-group .btn,
.message .modal-body .form-group .btn {
  padding: 10px 16px !important; height: auto !important;
}

.form-btn {
  padding: 10px 22px !important;
}

/* ---- Success popup ---- */
.success-popup__btn {
  background: #27ae60 !important; border-color: #219653 !important;
  box-shadow: 0 1px 2px rgba(39, 174, 96, 0.15) !important;
  padding: 10px 20px !important;
}
.success-popup__btn:hover {
  background: #2ecc71 !important;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.22) !important;
}

/* ---- Disabled / no-active ---- */
.next-step-btn a.no-active,
.next-step-btn a.no-active:hover {
  background: #d0d0d0 !important; color: #fff !important;
  border-color: #c0c0c0 !important; box-shadow: none !important;
  transform: none !important; cursor: not-allowed;
  pointer-events: none; opacity: 0.65;
}

/* ---- Payment links ---- */
.list-payment .table-Payment\/Packages tr td a,
.list-payment .table-Payment\/Packages tr td a i {
  color: #1B3E63 !important; transition: color 200ms ease;
}
.list-payment .table-Payment\/Packages tr td a:hover,
.list-payment .table-Payment\/Packages tr td a:hover i {
  color: #fd6c01 !important;
}

/* ---- Focus ring ---- */
.btn:focus,
.item-wrapper > .info a:focus,
.profile-controls .btn:focus,
.next-step-btn a:focus,
.form-btn:focus {
  outline: 2px solid #fd6c01; outline-offset: 2px;
}

/* ================================================================
   MOBILE — compact but tappable
   ================================================================ */

@media screen and (max-width: 800px) {
  .item-wrapper > .info a,
  .item-wrapper > .info a.btn-primary,
  .item-wrapper > .info a.btn-info,
  .profile-controls .btn,
  .btn-primary,
  .btn,
  .modal-body .form-group .btn,
  .form-btn {
    min-height: 40px;
    padding: 9px 14px !important;
  }
  .dashboard .nav-tabs-custom .tab-content .chat-controls .pull-right li,
  .chat-content .chat-controls .pull-right li {
    height: 46px !important; line-height: 46px !important;
  }
  .bodypage_guest .table-steps td a.btn {
    padding: 14px 3px !important; font-size: 10px !important;
  }
  .webinars-wrapper a.btn-webinar-enter,
  .webinars-wrapper a.btn-webinar-register {
    padding: 9px 14px !important; margin: 6px 3px !important;
    display: inline-block; min-height: 40px;
  }
}

@media screen and (max-width: 600px) {
  .bodypage_guest .table-steps td a.btn {
    padding: 12px 2px !important; font-size: 8px !important; min-height: 38px;
  }
  .table-control > div.pagination .bg-primary,
  .table-control > div.pagination .bg-disable,
  .btn-primary,
  .btn-disable {
    padding: 6px 10px !important; font-size: 11px;
  }
  .quick-control-buttons button,
  .quick-control-buttons a {
    padding: 10px 6px !important; font-size: 11px;
  }
  .mybuttonwrapper a {
    min-height: 40px; padding: 10px 14px !important;
  }
  .button {
    font-size: 10px !important; padding: 10px 14px !important; min-height: 40px;
  }
}

@media screen and (max-width: 400px) {
  .main-container .btn {
    font-size: 10px; min-height: 38px; padding: 8px 12px !important;
  }
  .step1_btn_block .button {
    padding: 8px 18px !important; font-size: 10px;
  }
  .btn.btn-primary.btn-create-first,
  .btn.btn-primary.btn-joined-jeunesse {
    font-size: 9px !important; padding: 8px 10px !important;
  }
}

@media screen and (max-width: 320px) {
  .main-container .btn {
    font-size: 9px; padding: 8px 10px !important;
  }
  .bodypage_guest .table-steps td a.btn {
    font-size: 7px !important; padding: 10px 2px !important;
  }
}

/* ###############################################################
   MODAL — Send Activation Key  (modern rewrite)
   ############################################################### */

/* Overlay backdrop */
.message .overlay {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal container */
.message .content {
  max-width: 520px !important;
  border-radius: 12px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 20px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  animation: modalSlideIn 250ms ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header bar */
.message .header {
  background: linear-gradient(135deg, #1B3E63 0%, #012353 100%) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

/* Header text */
.message .header .menu-left {
  background: transparent !important;
  padding: 14px 20px !important;
  flex: 1;
}

.message .header .menu-left span {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  display: block;
}

/* Close button — clean X, no fa icon */
.message .header .menu-right {
  position: static !important;
  padding: 0;
}

.message .header .menu-right ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.message .header .menu-right .toggle {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  transition: all 180ms ease;
  background: transparent;
  border: 0;
  padding: 0;
}

.message .header .menu-right .toggle::before {
  content: "\2715";
  font-family: inherit;
}

.message .header .menu-right .toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Hide any fa icons in modal header */
.message .header .menu-right .toggle i,
.message .header .menu-right .toggle .fa,
.message .header .menu-right .toggle .fas,
.message .header .menu-right .toggle .far {
  display: none !important;
}

/* Modal body */
.message .body .modal-body {
  padding: 24px !important;
  background: #fff;
}

/* Input field — modern */
.message .body .modal-body input.form-control {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 180ms ease;
  outline: none;
  margin-bottom: 16px;
}

.message .body .modal-body input.form-control::placeholder {
  color: #aaa;
}

.message .body .modal-body input.form-control:focus {
  background: #fff;
  border-color: #1B3E63;
  box-shadow:
    0 0 0 3px rgba(32, 105, 134, 0.12),
    inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Button row */
.message .body .modal-body .controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Cancel (Undo) button — subtle grey */
.message .body .modal-body .controls .btn-no {
  background: #f0f0f0 !important;
  color: #666 !important;
  border: 1px solid #ddd !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: all 180ms ease;
  height: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
}

.message .body .modal-body .controls .btn-no:hover {
  background: #e4e4e4 !important;
  border-color: #ccc !important;
  color: #444 !important;
}

/* Send Key button — blue gradient */
.message .body .modal-body .controls .btn-yes {
  background: linear-gradient(135deg, #1B3E63 0%, #012353 100%) !important;
  color: #fff !important;
  border: 1px solid #012353 !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: all 180ms ease;
  height: 40px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 43, 12, 0.2) !important;
}

.message .body .modal-body .controls .btn-yes:hover {
  background: linear-gradient(135deg, #fd6c01 0%, #e55a00 100%) !important;
  border-color: #d14d00 !important;
  box-shadow: 0 3px 10px rgba(15, 43, 12, 0.28) !important;
  transform: translateY(-1px);
}

.message .body .modal-body .controls .btn-yes:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 43, 12, 0.15) !important;
}

/* Mobile */
@media screen and (max-width: 600px) {
  .message .content {
    max-width: 92vw !important;
    margin: 0 auto;
  }
  .message .body .modal-body {
    padding: 18px !important;
  }
  .message .header .menu-left {
    padding: 12px 16px !important;
  }
  .message .header .menu-left span {
    font-size: 12px;
  }
  .message .body .modal-body input.form-control {
    height: 42px;
    font-size: 16px; /* prevent iOS zoom */
  }
  .message .body .modal-body .controls .btn-no,
  .message .body .modal-body .controls .btn-yes {
    flex: 1;
    justify-content: center;
  }
}

/* ================================================================
   BASE STYLES — modern button overrides applied
   ================================================================ */

@font-face {
  font-family: 'Open Sans';
  src: url(../fonts/OpenSans.ttf) format('truetype');
}

::-webkit-scrollbar {
  background: none;
  width: 14px;
  height: 12px;
  transition: 0s;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border: solid 0 rgba(0, 0, 0, 0);
  border-right-width: 2px;
  border-left-width: 2px;
  -webkit-border-radius: 9px 4px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 6px rgba(128, 128, 128, 0.2);
}
::-webkit-scrollbar-track-piece {
  margin: 2px 0;
}
.g-recaptcha{
    display: inline-block;
}
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1, h2, h3 {
  margin: 10px 0px;
}

h1{
  font-size: 37px;
}
h2{
  font-size: 25px;
}
h3{
  font-size: 21px;
  color: #939393;
}
h4{
  font-size: 16px;
  font-weight: bold;
}
html,
body{
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  display: block;
  background-color: #fff;
  font-size: 14px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
        min-width: 400px;
  height: 100%;
}
body,
body.collapse{
  display: table;
}
.header .collapse{
  display: inline-block;
}
.wrap {
  position: relative;
  display: table-row;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.wrap > .main-container {
  display: table;
  table-layout: fixed;
  vertical-align: top;
  padding: 40px;
  width: 100%;
  padding-top: 105px;


  height: 100%;
  background-color: #f9f8f8;
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 0px;
  background-color: #f8f8f8;
  border: 0px;
  padding: 10px;
    
  border-top: 1px solid #e7e7e7;
}

.menu-user{
        
  margin-top: -70px;
  padding: 70px 0px 70px 0px;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: inline-block;
  right: 15px;
}
.page-settings{
  display: none;
}
.breadcrumb {
  padding: 8px 0px;
  margin: 0px;
  list-style: none;
  background-color: transparent;
}
.breadcrumb > li {
  display: inline-block;
  color: #fd6c01;
  text-decoration: none;
  cursor: default;
}
.breadcrumb a.link{
  color: #fd6c01;
  text-decoration: underline;
  cursor: pointer;
}
.breadcrumb>li+li:before {
  padding: 0 5px;
  color: #fd6c01;
  content: "/\00a0";
}
.well{
  width: 100%;
  background-color: #f3f3f3;
  border: none;
  border-radius: 0px;
  box-shadow: none;
  padding: 15px;
  margin-bottom: 15px;
}
.panel>hr{
  padding: 0px;
  margin: 0px -10px;
  margin-bottom: 10px;
  border: 0px;
  border-bottom: 1px solid #c9c9c9;
}
label {
  display: inline-block;
  float: none;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.text-center{
  text-align: center;
}
.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/* ================================================================
   BUTTONS — modern orange & blue theme
   ================================================================ */

.btn {
  display: inline-block;
  padding: 9px 16px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 180ms ease;
  user-select: none;
}

/* ---- BLUE — primary, default, info ---- */
.bg-default,
.btn-default,
.btn-default:hover,
.bg-primary,
.btn-primary,
.btn-primary:hover {
  background: linear-gradient(135deg, #1B3E63 0%, #012353 100%);
  color: #fff;
  border: 1px solid #012353;
  box-shadow: 0 1px 2px rgba(15, 43, 12, 0.15);
}
.bg-default:hover,
.btn-default:hover,
.bg-primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #fd6c01 0%, #e55a00 100%);
  border-color: #d14d00;
  box-shadow: 0 2px 6px rgba(15, 43, 12, 0.22);
  transform: translateY(-1px);
}

/* ---- ORANGE — warning, study, activate ---- */
.bg-warning,
.btn-warning,
.btn-warning:hover {
  background: #fd6c01;
  color: #fff;
  border: 1px solid #e55b00;
  box-shadow: 0 1px 2px rgba(253, 108, 1, 0.15);
}
.bg-warning:hover,
.btn-warning:hover {
  background: #e55b00;
  border-color: #d45200;
  box-shadow: 0 2px 6px rgba(253, 108, 1, 0.22);
  transform: translateY(-1px);
}

/* ---- SUCCESS ---- */
.bg-success,
.btn-success,
.btn-success:hover {
  background: #27ae60;
  color: #fff;
  border: 1px solid #219653;
  box-shadow: 0 1px 2px rgba(39, 174, 96, 0.15);
}
.bg-success:hover,
.btn-success:hover {
  background: #2ecc71;
  border-color: #27ae60;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.22);
  transform: translateY(-1px);
}

/* ---- DANGER ---- */
.bg-danger,
.btn-danger,
.btn-danger:hover {
  background: #c0392b;
  color: #fff;
  border: 1px solid #a93226;
  box-shadow: 0 1px 2px rgba(192, 57, 43, 0.15);
}
.bg-danger:hover,
.btn-danger:hover {
  background: #e74c3c;
  border-color: #c0392b;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.22);
  transform: translateY(-1px);
}

/* ---- DISABLED ---- */
.bg-disable,
.btn-disable,
.btn-disable:hover {
  background: #e0e0e0;
  color: #aaa;
  border: 1px solid #d5d5d5;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-vip>span{
  font-size: 16px;
  line-height: 31px;
}

/* ---- Text colour classes ---- */
.disable:hover,
.disable{
  color: #bbb;
}
.default:hover,
.default{
  color: #e55a00;
}
.primary:hover,
.primary{
  color: #fd6c01;
}
.danger:hover,
.danger{
  color: #c0392b;
}
.warning:hover,
.warning{
  color: #fd6c01;
}
.disable.active:hover,
.disable.active,
.success:hover,
.success{
  color: #27ae60;
}

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
.hidden{
  display: none !important;    
}
.visible{
  display: block !important;    
}
.visible-inline{
  display: inline-block !important;    
}
.visible-cell{
  display: table-cell !important;    
}
.alert{
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-success {
  color: #333;
  background-color: #ffeeaa94;
  border-color: #ffeeaa17; 
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}


.code-phone{
    
    min-width: 110px;
}
.code-phone>i{
    position: absolute;
    top: 13px;
    left: 12px;
    height: 11px;
    width: 16px;
    z-index: 2;
}
.code-phone>i:after{
    position: absolute;
    content: '+';
    top: 0px;
    left: 20px;
    font-size: 14px;
    font-style: normal;
    line-height: 12px;
}
.code-phone>input.form-control:not(:first-child),
.code-phone>input.form-control:first-child{
    padding-left: 40px;
    border-right: 0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.code-phone .dropdown-menu,
.code-phone .dropdown-menu{
    left: 0px;
    right: 0px;
    width: auto;
    max-height: 200px;
    overflow: auto;
    padding: 5px 10px;
}
.input-group.field-wysiwyg-lng{
    width: 100%;
    padding-left: 41px;
}
.input-group.field-wysiwyg-lng .input-group-addon:first-child {
    border-right: 0;
    position: absolute;
    left: 0px;
    height: 100%;
    width: 41px;
    text-align: center;
    padding: 7px 0px;
}
.input-group.field-wysiwyg-lng .note-editor{
    display: block;
    width: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px solid #ccc;
}
.input-group.field-wysiwyg-lng .note-editor .input-group{
    display: flex;
}
.input-group.field-wysiwyg-lng .note-editor .input-group .input-group-addon{
    display: flex;
    width: auto;
}
.note-popover .bg-default,
.note-popover .btn-default:hover,
.note-popover .btn-default,
.input-group.field-wysiwyg-lng .note-editor .bg-default,
.input-group.field-wysiwyg-lng .note-editor .btn-default:hover,
.input-group.field-wysiwyg-lng .note-editor .btn-default {
    background: linear-gradient(135deg, #1B3E63 0%, #012353 100%);
    border: 1px solid #012353;
    color: #fff;
}
.input-group.field-remindercondition>.form-control select{
    padding: 5px;
    margin: 5px 0px 0px 0px;
    height: 30px;
}
.input-group.field-remindercondition>.form-control .input-group-btn>select{
    width: 100px;
}
.form-group {
    margin-bottom: 15px;
}

.input-group[class*="col-"] {
  float: none;
  padding-right: 0;
  padding-left: 0;
}

.input-group .form-control {
  position: relative;
  z-index: 1;
  float: left;
  width: 100%;
  margin-bottom: 0;
  outline: none;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  border-radius: 4px;
}
.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}
.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 18px;
  border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-addon:last-child {
  border-left: 0;
}
.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}
.input-group-btn > .btn {
  position: relative;
}
.input-group-btn > .btn + .btn {
  margin-left: -1px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
  z-index: 2;
}
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  z-index: 2;
  margin-left: -1px;
}
.row{
    
  margin-bottom: 15px;
}
.row:before,
.row:after{
  display: table;
  content: " ";
  border-collapse: collapse;
}
.row:after {
  clear: both;
}
th .dropdown-toggle{
  width: auto;
  border: 0px;
  background: transparent;
  text-align: left;
  padding: 12px;
}
th .caret{
  position: absolute;
  top: 0px;
  padding: 15px 0px;
  width: 20px;
  border: 0px;
}

.message,
.message:hover{
  position: fixed;
  overflow-y: auto;
  z-index: 10010;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: rgba(0,0,0,0.5);
  color: #0f1010;
}
.message .form{
  position: relative;
  display: table;
  width: 100%;
  height: 100%;
}
.message-body-scroll-none{
  overflow-x: hidden;
  overflow-y: hidden;
}
.message .wrapper{
  display: table-cell;
  vertical-align: middle;
}
.message .content{
    
  margin: auto;
  background-color: #edf1f3f5;
  border: 0px;
  border-radius: 2px;
  width: 100%;
}
.message .header{
  position: relative;
  min-height: 30px;
}
.message .header .menu-left{
  padding: 10px;
  padding-bottom: 0px;
}
.message .header .menu-right{
  position: absolute;
  padding: 0px;
  margin: 0px;
  top:0px;
  right:0px;
}
.message .header .menu-right ul{
  padding: 0px;
  margin: 0px;
  list-style: none;
  float: right;
}
.message .header .menu-right ul>li{
  padding: 0px 5px;
  margin: 0px;
  color: #c9c9c9;
  font-family: inherit;
  font-size: 21px;
  cursor: pointer;
}
.message .modal-body{
  color: red;
  padding: 5px 15px;
  border: 1px #fff solid;
  background-color: #fff;
}
.message .modal-body .breadcrumb{
  padding-top: 0px;
}
.languages{
  float: left;
  margin: 30px 0px 0px 10px;
  width:30px;
}
.languages>button{
  border: 0px;
  padding: 1px 6px;
}
.languages>button .caret{
  float: left;
  margin-left: 10px;
}
.languages .dropdown-backdrop{
    display: none;
}
.field-image{
  padding: 5px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05);

  width: inherit;
}
.field-image .form-control.image{
  width: 200px;
  height: 150px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
        padding: 0px;
  font-size: 150px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0px;
  border-radius: 3px;
  box-shadow: none;
}
.field-select-text>.dropdown-menu{
  width: 100%;
  max-height: 250px;
  overflow: auto;
}
.field-presenters .presenter-avatar{
    width: 60px;
    height: 60px;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0px;
    border-radius: 30px;
}
.field-strlng-menu{
        margin-bottom: 5px;
}
.field-remindercondition>div,
.field-multiselect>div{
        float: none;
        height: 183px;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
}
.item-row{
  padding: 0px 10px;
}
.item-folder-wrapper,
.item-file-wrapper{
  padding: 5px;
}
.item-file.selected,
.item-folder.selected{
  background-color: rgba(0,0,0,0.05);
}
.item-file>.image{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100px;
  margin: 10px auto;
}
.item-folder>.directory{
  padding: 15px;
}
.item-category>.directory .fa,
.item-folder>.directory .fa{
  color: #38b5e5;
}
.item-folder,
.item-file{
  min-height: 170px;    
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.file-manager .header{
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
}
.message.file-manager .popover .popover-title{
    margin: 0px;
}
.message.file-manager .modal-body .form-group .btn {
    padding: 7px 12px;
}
.loader{
    
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #000;
    background-image: url(../img/safety.gif);
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.7;
    display: none;
}
.loader>.box {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: -75px 0 0 -75px;
  border: 16px solid transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-top: 16px solid rgba(56,181,229,1);
  border-bottom: 16px solid rgba(56,181,229,1);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.alert-reminder{
  position: absolute;
  display: block;
  font-family: inherit;
  font-size: 8px;
  background-color: #f00;
  color: #fff;
  border-radius: 10px;
  height: 12px;
  min-width: 12px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  top: 18px;
  left: 20px;
}
.guest-wrapper>.profile-status{
  padding: 0px 0px;
  position: fixed;
  top: 0px;
  right: 0px;
  width: auto;
  z-index: 1030;
}
.order-state{
  display: block;
  white-space: nowrap;
  padding: 10px;
   
  border-radius: 4px;
  cursor: default;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 450px) {
  .hidden-ss {
    display: none !important;
  }
  .visible-ss{
    display: block !important;
  }
  .visible-ss-inline{
    display: inline-block !important;
  }
  .visible-ss-cell{
    display: table-cell !important;    
  }
}
@media (max-width: 550px) {
  .guest-wrapper>.profile-status{
    display: none;
  }
}
@media (max-width: 767px) {
        .new-contacts-btn{
            display: none;
        }
}
@media (min-width: 451px) and (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
  .visible-xs{
    display: block !important;
  }
  .visible-xs-inline{
    display: inline-block !important;
  }
  .visible-xs-cell{
    display: table-cell !important;    
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
  .visible-sm{
    display: block !important;
  }
  .visible-sm-inline{
    display: inline-block !important;
  }
  .visible-sm-cell{
    display: table-cell !important;    
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
  .visible-md{
    display: block !important;
  }
  .visible-md-inline{
    display: inline-block !important;
  }
  .visible-md-cell{
    display: table-cell !important;    
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
  .visible-lg{
    display: block !important;
  }
  .visible-lg-inline{
    display: inline-block !important;
  }
  .visible-lg-cell{
    display: table-cell !important;    
  }
}
/* ==================== Page Dashboard ============================= */
.dashboard .head{
  padding: 10px;
  cursor: pointer;
}
.dashboard .head{
  background-color: #f6f6f6;
}
.dashboard .info{
  background-color: #f9f9f9;
}
.dashboard .info .tab-pane.profile-item-notes,
.dashboard .info .tab-pane.profile-item-correspondence{
  width: 100%;
  height: 100%;
}
.dashboard .info .notes-controls>ul{
  margin-top: -52px;
  margin-right: -15px;
  display: none;
}
.dashboard .info .notes-messages .message-content{
  width: 100%;
  height: 400px;
  overflow: auto;
  resize: none;
  border: 0px;
}
.chat-messages{
  list-style: none;
  padding: 0px;
  height: 350px;
  overflow: auto;
}
.profile-item-chat-msg{
    
  position: relative;
  padding-bottom: 15px;
}
.profile-item-chat-msg-date{
  position: absolute;
  top: 5px;
  right: 0px;
}
.profile-item-chat-msg-content{
    
  display: block;
  width: auto;
  padding: 5px 15px;
  border-radius: 5px;
}
.profile .chat-controls{
  display: none;
}
.msg-left >.profile-item-chat-msg-content{
    
  background-color: #e3eff7;
  margin-right: 200px;
  margin-left: 50px;
}
.msg-left >.profile-item-chat-msg-content:before{
  position: absolute;
  top: 7px;
  left: 36px;
  content: '';
  border: 7px solid transparent;
  border-right-color: #e3eff7;
}
.msg-right >.profile-item-chat-msg-content{
    
  background-color: #a8dcff;
  margin-right: 150px;
  margin-left: 100px;
}
.msg-right >.profile-item-chat-msg-content:before{
  position: absolute;
  top: 7px;
  right: 136px;
  content: '';
  border: 7px solid transparent;
  border-left-color: #a8dcff;
}
.profile-item-chat-avatar{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 40px;
  width: 40px;
  background-color: #c9c9c9;
  border-radius: 20px;
  border: 3px solid #fff;
  margin-top: -6px;
  text-align: center;
  padding: 0px;
  color: #fff;
  font-size: 22px;
}
.chat-controls>textarea{
    width: 100%;
    resize: vertical;
    overflow: auto;
    margin-bottom: 5px;
}
.dashboard .info .tab-pane{
  min-height: 400px;
  margin: 0px;
  padding: 0px;
}
.dashboard .item.head,
.dashboard item.info{
  background-color: transparent;
}
.dashboard .item.info{
  display: none;
  opacity: 0;
}
.dashboard .head .profile-avatar{
  float: left;
  width: auto;
  padding: 0px;
  margin: 0px;
  margin-top: -5px;
  margin-right: 10px;
}
.dashboard .head .profile-avatar>div{
  position: static;
  top: 0px;
  left: 0px;
  margin-left: 0px;
  height: 50px;
  width: 50px;
  background-color: #c9c9c9;
  border-radius: 30px;    
}
.dashboard .head .profile-avatar>div>i{
  font-size: 25px;
  line-height: 40px;
  width: 40px;
}
.dashboard .head .profile-avatar .online{
  position: absolute;
  left: 32px;
  top: 32px;
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background-color: #01520f;
  border: 2px solid #fff;
}
.dashboard .head .profile-avatar .online.success{
  background-color: #c3d600;
}

.dashboard .head .profile-avatar .online.disable{
  background-color: #ababab;
}
.dashboard tbody > tr.info > td{
  background-color: transparent;
}
.dashboard .tab-content{
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: 0px;
  padding: 15px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dashboard .panel.profile{
  margin-bottom: 0px;
}

/* ==================== Page Profile =============================== */

.profile-controls.form-group {
  margin-top: 10px;
}
.panel.profile{
  padding: 0px;    
  border: 1px solid #ddd;
}
.panel.profile>hr{
  margin: 0px;
}
.profile-head,
.profile-social,
.profile-status,
.profile-avatar{
    position: relative;
    width: 100%;
    text-align: center;
}
.profile-avatar{
    padding-top: 50px;
}
.profile-status{
    padding: 10px 0px;
}
.profile-head{
  padding: 10px;
  background-color: #c9c9c9;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: right;
  margin-bottom: 10px;
  height: 200px;
}
.profile-name{
  text-align: center;
}
.profile-info{
  font-weight: normal;
  text-align: center;
}
.profile-avatar a,
.profile-social a{
  color: royalblue;
  font-weight: normal;
  text-decoration: none;
  border: 0px;
  border-bottom: 1px dashed royalblue;
  cursor: pointer;
}
.profile-head a{
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-weight: normal;
  color: #fff;
  text-decoration: none;
  border: 0px;
  border-bottom: 1px dashed #fff;
  cursor: pointer;
}
.profile-status ul{
  display: inline-block;
  list-style: none;
  padding: 0px;
  margin: 0px auto;
}
.profile-status ul li{
    
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-family: inherit;
  font-size: 21px;
  width:50px;
}
.profile-status ul li>span{
  font-family: inherit;
  font-size: 10px;
  display: block;
  white-space: normal;
}
.profile-social ul{
    display: table;
    border-collapse: separate;
    border-spacing: 3px;
    list-style: none;
    padding: 0px;
    margin: 0px auto;
}
.profile-social ul li,
.profile-social ul li:hover{
    position: relative;
    display: table-cell;
    vertical-align: top;
    text-align: center;
    font-family: inherit;
    background-color: #939393;
    vertical-align: middle;
    font-size: 21px;
    width: 50px;
    height: 50px;
    border:0px;
    border-radius: 25px;
}
.profile-social ul li> a,
.profile-social ul li> a:hover{
    background: transparent;
    border: 0px;
    color: #fff;
    width: auto;
    height: 17px;
    padding: 0px;
    display: inline-block;
}
.profile-social ul li> a .fa,
.profile-social ul li:hover> a .fa{
    color: #fff;
    font-size: 21px;
}
.profile-social ul li> a .fa:before{
    float: none;
    width: auto;
}
.profile-avatar>div{
  position: absolute;
  top: -50px;
  left: 50%;
  height: 80px;
  width: 80px;
  background-color: #c9c9c9;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 40px;
  border: 5px solid #fff;
  margin-left: -40px;
}
.profile-avatar>div>i{
  font-size: 45px;
  line-height: 70px;
  width: 70px;
  color: #fff;
}
.profile-sponsor .panel{
  min-height: 200px;
}
.login-jeunesses{
    color: #f7be07;
    padding: 10px;
    float: none;
}
body.collapse .left-menu .login-jeunesses {
    display: none;
}
.login-jeunesses a,
.login-jeunesses a:hover,
.login-jeunesses a:visited,
.login-jeunesses a:focus{
    color:  #d8006c;
}
.profile .statistic{
  width: 100%;
  border: 0px;
  border-top: 1px solid #c9c9c9;
  border-collapse: collapse;
  border-spacing: 0px;
}
.profile .statistic td{
  text-align: center;
  font-family: inherit;
  border-left: 1px solid #c9c9c9;
  cursor: pointer;
}
.profile .statistic td:first-child{
  border-left: 0px;
}
.profile .statistic span{
  font-family: inherit;
  font-size: 10px;
  color: #c9c9c9;
}
.profile.panel>ul{
    padding: 0px;
    margin: 0px;
    text-align: center;
    list-style: none;
}
.profile.panel>ul li{
    display: inline-block;
}

/* ==================== Page Guest =============================== */
.guest-wrapper{
  padding-right: 50px;
}
.guest-wrapper section{
  position: relative;
  width:100%;
  margin: 0px;
  padding: 0px;
}
.guest-wrapper section .content{
  padding: 15px 50px 15px 15px;
  width:100%;
  min-height: 250px;
}
.guest-wrapper section.guest1 .content{
  padding-top: 15px;
}
.guest-wrapper section .shade{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.guest-wrapper .status-bar{
  display: table;
  position: fixed;
  top:0px;
  right:0px;
  z-index: 3;
  width: 70px;
  height: 100%;
  background-color: #eee;
  padding-top: 70px;
}
.guest-wrapper .status-bar-wrapper{
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 100%;
  height: 100%;
}
.guest-wrapper .status-bar .bar{
  display: inline-block;
  transition: height 5s;
  width: 100%;
  height: 0%;
  margin-bottom: -5px;
}
.g_video{
  position: relative;
}
.viedo-starter{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0px;
  left: 0px;
}
@media (max-width: 992px){
  .guest-wrapper .status-bar{
    width: 35px;
  }
}

a:hover{text-decoration: none;}


.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
}



.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 .col-10, .col-11{
  float: left;
  position: relative;
}

.col-1{width: 8.333333333333333%;}
.col-2{width: 16.66666666666666%;}
.col-3{width: 25%;}
.col-4{width: 33.33333333333333%;}
.col-5{width: 41.66666666666667%;}
.col-6{width: 50%;}
.col-7{width: 58.33333333333333%;}
.col-8{width: 66.66666666666666%;}
.col-9{width: 75%;}
.col-10{width: 83.33333333333333%;}
.col-11{width: 91.66666666666666%;}
.col-12{width: 100%;}


/*ul_style*/
.ul_style{
  list-style: none;
  font-size: 14px;
}

.ul_style li{
  margin: 15px 0;
  position: relative;
  padding-left: 15px;
}

.ul_style li:before{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #f7be07;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  left: -6px;
  top: 2px;
}
/*ul_style*/


.g_block {
  padding: 20px 0;
}

.g_title{
  font-size: 34px;
  padding: 10px 0 20px;
  text-align: center;
  font-weight: 700;
}

.g_title-s{
  font-size: 18px;
  padding: 10px 0;
  font-weight: 500;
}

.g_subTitle{
  font-weight: 400;
  font-size: 21px;
  text-align: center;
}

.g_text{
  font-size: 15px;
  line-height: 1.5;
  margin: 20px 0;
}

.g_text-line{
  padding-left: 20px;
  border-left:5px solid #f7be07;
  overflow: hidden;
}

.g_hr{
  height: 1px;
  background-color: #e6e6e6;
  width: 100%;
  margin: 20px 0;
}

.g_marker{
  font-size: 15px;
  background: #38b5e6;
  width: 27px;
  display: inline-block;
  height: 27px;
  -webkit-border-radius: 27px;
  -moz-border-radius: 27px;
  border-radius: 27px;
  text-align: center;
  vertical-align: middle;
  color:white;
  margin-right: 5px;
}

.g_marker span{
  display: inline-block;
  padding-top: 5px;
  display: inline-block;
  padding-top: 3px;
  margin-left: -1px;
}

/* ================================================================
   G_BUTTONS — modern theme
   ================================================================ */

.g_button{
  padding: 10px 20px;
  font-weight: 400;
  color: white;
  background: linear-gradient(135deg, #1B3E63 0%, #012353 100%);
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #012353;
  box-shadow: 0 1px 2px rgba(15, 43, 12, 0.15);
  transition: all 180ms ease;
}

.g_button:hover{
  background: linear-gradient(135deg, #fd6c01 0%, #e55a00 100%);
  border-color: #d14d00;
  box-shadow: 0 2px 6px rgba(15, 43, 12, 0.22);
  transform: translateY(-1px);
}

.g_button-red{
  background: #c0392b;
  border-color: #a93226;
  box-shadow: 0 1px 2px rgba(192, 57, 43, 0.15);
}

.g_button-red:hover{
  background: #e74c3c;
  border-color: #c0392b;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.22);
}

.g_input{
  width: 260px;
  padding: 13px 18px;
  background-color: #fafafa;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  margin-right: 10px;
  margin-bottom: 10px;
}

.g_input:focus{
  border-color:#d8006c;
  background-color: #fff;
}

.g_title_center{text-align: center; font-size: 20px; color:black; font-weight: 700; text-transform: uppercase;}
.g_title_center span{display: inline-block; position: relative;}
.g_title_center span:after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 40%;
  left: -30px;
  width: 20px;
  height: 3px;
  background-color: #c9c9c9;
}

.g_title_center span:before{
content: "";
  display: inline-block;
  position: absolute;
  top: 40%;
  right: -30px;
  width: 20px;
  height: 3px;
  background-color: #c9c9c9;
}
/*=======================base=======================*/


/*g_about*/
.g_about__left{
  width: 40%;
  float: left
}

.g_about__right{
  width: 60%;
  float: left
}

.g_about__title{
  font-size: 27px;
  font-weight: 700;
}

.g_about__img{
  padding-right:30px;
  max-width: 100%;
}

.g_about__title {
  margin-bottom: 10px;
}

.g_about__title span{
  display: inline-block;
  background-color: #f7be07;
  padding: 3px 6px;
}

.g_about__subtitle{
  font-size: 16px;
}

.g_about__list{
  display: inline-block;
  margin: 5px 20px;
}


@media screen and (max-width: 600px){
  .g_about__img { padding-right:0px;}
  .g_about__left {text-align: center; float: none; width: 100%;}
  .g_about__right {float: none; width: 100%;}
}
/*g_about*/




.g_step__block{
  padding-bottom: 20px;
}

.g_stepOne_left{
  width: 45%;
  float: left;
  padding-right: 20px;
}

.g_stepOne_left .g_video{
  padding-bottom: 60%;
  padding-top: 100px;
}

.g_stepOne_right{
  overflow: hidden;
}

.g_step_title{
  font-size: 62px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.g_step_subTitle{
  font-size: 20px;
  text-transform: none;
}


.g_stepOne__item_text{
  font-size: 16px;
  font-weight: 500;
  margin-top: 10px;
  text-align: center;
}

.g_stepOne__item_video{
  padding: 10px;
}




/*g_advant*/
.g_advant_item{
  padding: 7px;
}

.g_advant_itemIn{
  padding: 25px 20px;
  border:2px solid #38b5e6;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.g_advant_item i{
  float: left;
  font-size: 42px;
  color: #38b5e6;
}

.g_advant_item__text{
  color: #222;
  line-height: 1.35;
  font-size: 16px;
  overflow: hidden;
  padding-left: 14px;
}
/*g_advant*/


/*g_video*/
.g_video{
  position: relative;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  border: 1px solid #ccc;
}

.g_video iframe, .g_video .g_video object, .g_video .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*g_video*/


/*g_tarif*/
.g_tarif_wrap{
  overflow-x: auto;
}

.g_tarif{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.g_tarif__cell{
  border: 1px solid #e9e9e9;
  text-align: center;
  vertical-align: middle;
}

.g_tarif_icon{
  font-size: 20px;
}

.g_tarif_align{
  text-align: left;
}

.g_tarif__headrow .g_tarif__cell{
  padding: 20px;
  text-align: center;
}
.g_tarif__headrow .g_tarif__one{background-color: #38b5e6;}
.g_tarif__headrow .g_tarif__two{background-color: #d8006c;}
.g_tarif__headrow .g_tarif__three{background-color: #b9cb00;}

.g_tarif__headrow .g_tarif__two .g_tarif__buy{border-color: #94004a; color:#d8006c;}
.g_tarif__headrow .g_tarif__three .g_tarif__buy{border-color: #8a9800;  color:#b9cb00;}

.g_tarif__bodyrow .g_tarif__cell{padding: 15px 20px;}

.g_tarif__bodyrow .g_tarif__one{color: #38b5e6;}
.g_tarif__bodyrow .g_tarif__two{color: #d8006c;}
.g_tarif__bodyrow .g_tarif__three{color: #b9cb00;}

.g_tarif__one .g_tarif__price{color:#094a64;}
.g_tarif__two .g_tarif__price{color:#640635;}
.g_tarif__three .g_tarif__price{color:#505800;}

.g_tarif__title{font-size: 18px; font-weight: 500;}

.g_tarif__time{
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.g_tarif__price{
  font-size:36px;
  font-weight: 700;
  padding: 10px;
}

.g_tarif__price span{
 font-size:18px;
}

.g_tarif__buy{
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #38b5e6;
  border-bottom: 2px solid #0083b6;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 40px 13px;
  display: inline-block;
}
/*g_tarif*/



/*g_open*/
.g_open_wrap{
  border-top: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
}

.g_open_item{
  width: 20%;
  height: 200px;
  display: table;
  float: left;
}

.g_open_item__in{
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px;
}

.g_open_icon{
  color: #c3d600;
  font-size: 40px;
}

.g_open_title{
  font-size: 17px;
  font-weight: 700;
  padding: 15px 0;
}

.g_open_text{
  font-size: 13px;
  line-height: 1.4;
}
/*g_open*/

.g_step__inform{
  padding: 5px 0 15px;
}

.g_step__inform span{
  font-weight: 700;
  color:#d8006c;
}

.g_step_five{
  margin-top: 20px;
}

/**/
.step_five__act_text{
  margin-bottom: 15px;
}

.step_five__act{
  vertical-align: middle;
  font-size: 15px;
  padding: 70px 20px;
  text-align: center;
  border: 3px solid #dadada;
}

/**/

.g_step_five__instruct{text-align: center;}
.g_step_five__instruct a{margin: 0 20px; display: block;}
.g_step_five__instruct img{max-width: 100%;}



@media screen and (max-width: 960px){
  .g_advant_item {
  width: 50%;
  }

  .g_block{padding: 20px 0 0;}
}



@media screen and (max-width: 840px){
  .g_step_five__info{
  width: 100%;
  margin: 0 auto;
  float: none;
  margin-bottom: 30px;
  }

  .g_open_item{
  width: 33.3%;
  }

  .g_step_five__act{width: 60%;}
  .g_step_five__instruct{width: 40%;}
}


@media screen and (max-width: 760px){
  .g_stepOne_right {text-align: center; float: none; width: 100%;}
  .g_stepOne_left {float: none; width: 100%; margin-bottom: 20px;}
  .g_step_five{margin-bottom: 20px;}
}


@media screen and (max-width: 500px){
    h1{
  font-size: 18px;
    }
    h2{
        font-size: 12px;
    }
    h3{
        font-size: 10px;
    }
    h4{
  font-size: 9px;
}
  .g_advant_itemIn i{display: none;}
  .g_advant_itemIn{ padding: 10px;}
  .g_advant_item__text{font-size:14px; }
  .g_open_item{width: 50%;}
  .g_open_item__in{padding:10px;}

  .step_five__act{padding: 40px 20px;}
}



/*g_landing*/
.g_landing{
  background-color: #fbfbfb;
  border:1px solid #e5e5e5;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  position: relative;
  padding: 40px 40px 20px 40px;
}

.g_landing__wrap{padding: 20px 50px; position: relative;}
.g_landing__name{
  color: white;
  position: absolute;
  bottom: 10px;
  padding: 10px 20px;
  z-index: 1;
  width: 100%;
}


.g_landing__item{
  width: 33.3%;
  float: left;
  position: relative;
  border: 1px solid #fbfbfb;
}


.g_landing__item:after{
  content: "";
  position: absolute;
  bottom:0;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
  width: 100%;
  height: 100%;
}

.g_landing__item:hover .g_landing__name{text-decoration: underline;}


.g_landing__item img{
  max-width: 100%;
}

.g_array_slide{background-color: #dfdfdf; display: inline-block;padding: 10px 15px; position: absolute;}
.g_array_slide i{font-size: 40px; color: #ffffff;}

.g_array_slide:hover{background-color: #c3d600;}

.g_array_slideL{
  left: -40px;
  top:50%;
  margin-top: -25px;
  cursor: pointer;
}

.g_array_slideR{
  right: -40px;
  top:50%;
  margin-top: -25px;
  cursor: pointer;
}

/*g_landing*/



.btn_more{
  border-top: 1px solid #e6e6e6;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  color:#5d5d5d;
  margin-top: 30px;
}


.btn_more_indent {margin-left: 20px; margin-right: 20px;}

.btn_more_inside{
  padding:0 20px;
  background-color: #fbfbfb;
  position: relative;
  bottom: 23px;
  display: inline-block;
}

.btn_text{
  font-size:14px;
  padding:12px 30px;
  border: 2px solid #e6e6e6;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #fff;
  -webkit-transition: 300ms ease;
  -moz-transition: 300ms ease;
  -ms-transition: 300ms ease;
  -o-transition: 300ms ease;
  transition: 300ms ease;
  display: inline-block;
}

.btn_more:hover .btn_text {
  border: 2px solid #fff;
  box-shadow: inset 0 0 0 1px #d8006c;
  color:#d8006c;
}


/* ================================================================
   NEW CONTACTS BUTTON — modern
   ================================================================ */

.new-contacts-btn {
    float: right;
    margin: 20px 10px 0 0px;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(135deg, #1B3E63 0%, #012353 100%);
    padding: 9px 24px;
    border: 1px solid #012353;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    transition: all 180ms ease;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 43, 12, 0.15);
}

.new-contacts-btn:hover {
    background: linear-gradient(135deg, #fd6c01 0%, #e55a00 100%);
    border-color: #d14d00;
    color: #fff;
    box-shadow: 0 3px 8px rgba(15, 43, 12, 0.22);
    transform: translateY(-1px);
}
.new-contacts-btn.disable,
.new-contacts-btn.disable:hover{
    border: 1px solid #ddd;
    background: #eee;
    color: #999;
    box-shadow: none;
    transform: none;
}
.new-contacts-btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(32, 105, 134, 0.2);
  border-radius: 50px;
  animation: pulse 2s linear infinite;
}
.new-contacts-btn.disable:after{
    display: none;
}
@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05, 1.15);
    }
    100% {
        opacity: 0;
        transform: scale(1.1, 1.2);
    }
}

/*--profile block--*/

.profile-block {
    float: right;
    padding: 20px 20px 0px 0;
}

.profile-block > div {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 15px;
    transition: all 150ms ease-in-out;
}

.profile-block .chat {
  color: #213A54;
    font-size: 20px;
}

.profile-block .user {
  color: #c3d600;
    font-size: 20px;
}

.profile-block .notifications {
  color: #f7be07;
    font-size: 20px;
}

.profile-block .user:hover,
.profile-block .notifications:hover {
    transform: scale(1.2);
}

.profile-block .profile-settings {
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #fff;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 150ms ease-in-out;
}

.profile-block .profile-settings:hover {
    border-color: rgba(216, 0, 108, 0.5);
}

.profile-block .profile-settings img {width: 100%;}

/*--profile block--*/


/*--menu--*/

.left-menu.menu-home {background: #00000061;}
.left-menu.menu-settings {background: #ff5722;}

.left-menu.menu-home>.left-menu-wrap>ul li.active {background-color: #00000061;}
.left-menu.menu-settings>.left-menu-wrap>ul li.active {background-color: #00000061;}

.left-menu.menu-settings>.left-menu-wrap>ul li .fa {color: #9ccafe;}

.left-menu.menu-home>.left-menu-wrap>ul li.active::after {border-left: 20px solid #ff5722;}
.left-menu.menu-settings>.left-menu-wrap>ul li.active::after {border-left: 20px solid #ff5722;}

.left-menu.menu-settings>.left-menu-wrap>ul li,
.left-menu.menu-settings>.left-menu-wrap>ul li:hover,
.left-menu.menu-settings>.left-menu-wrap>ul li:focus {
    border-bottom: 1px solid #00000061;
}

.left-menu.menu-settings .header {background: #ff5722;}
.left-menu.menu-home .header {background: #ff5722;}

.left-menu.menu-settings .header {
    border-bottom: 1px solid #ff5722;
}

.left-menu.menu-home li.open>ul.dropdown-menu li a .fa:before,
.left-menu.menu-settings li.open>ul.dropdown-menu li a .fa:before {display: none;}

.left-menu .left-menu-wrap ul>li.disable,
.left-menu .left-menu-wrap ul>li.disable:hover,
.left-menu .left-menu-wrap ul>li.disable>a,
.left-menu .left-menu-wrap ul>li.disable:hover>a{
    cursor:default;
}
.left-menu .left-menu-wrap ul>li.disable>a,
.left-menu .left-menu-wrap ul>li.disable:hover>a,
.left-menu .left-menu-wrap ul>li.open li.disable>a,
.left-menu .left-menu-wrap ul>li.open li.disable:hover>a{
    color: #000 !important;
}

.dropdown-menu {border-radius: 0;}

.left-menu .profile-sponsor {
    float: none;
}
.left-menu .profile-sponsor>label{
    color: #fff;
    padding-top: 30px;
}
body.collapse .left-menu .profile-sponsor{
    display: none;
}

/*--Switcher--*/

.switcher-name, .switcher-btn {
    display: inline-block;
    vertical-align: middle;
}

.switcher-name a {
    color: #fff;
    text-decoration: none;
}

.switcher-btn {
    width: 35px;
    background: #fff;
    border-radius: 30px;
    padding: 2px;
    position: relative;
    height: 18.5px;
    cursor: pointer;
    margin: 0px 4px;
}

.collapse .switcher-btn{
    width: 17px;
    background: #fff;
    border-radius: 5px;
    padding: 0px;
    position: relative;
    height: 12px;
    cursor: pointer;
    margin: 0px;
    margin-top: -2px;
    margin-left: -28px;
}
.collapse .switch-settings .switcher-btn{
    margin-left: -24px;
}
.collapse .switcher-btn>.switch-circle {
    width: 10px;
    height: 10px;
    background-color: #d8006c;
    border-radius: 50%;
    position: absolute;
    left: 1px;
    top: 1px;
    transition: all 150ms ease-in-out;
}
.collapse .switch-settings .switcher-btn>.switch-circle {
    left: 6px;
    margin: 0px;
}
.collapse .switcher-name>a>span{
    display: none;
}

.switch-home .switch-circle {
    width: 15px;
    height: 15px;
    background-color: #d8006c;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: all 150ms ease-in-out;
}

.switch-settings .switch-circle {
    width: 15px;
    height: 15px;
    background-color: #d8006c;
    border-radius: 50%;
    position: absolute;
    left: 100%;
    top: 2px;
    margin-left: -17px;
    transition: all 150ms ease-in-out;
}

/*--Switcher--*/

/*--Table--*/

.table > thead > tr > th {border-bottom: none;}

.table .btn-selected {
    position: relative;
    top: 3px;
    color: #bababa;
}

.table-responsive table th.fixed-right, .table-responsive table td.fixed-right {
    border-left: 2px solid #f6f6f6 !important;
}

.table-responsive table>thead>tr>th .dropdown-menu li {color: #333;}

.table-responsive table>thead>tr>th .dropdown-menu li>.input-group>.input-group-addon {display: table-cell;}

td.cell-sort {
    padding: 0 10px !important;
}

.table-responsive table>thead>tr>th:nth-child(1)>.btn-selected {color: #fff;}

.table-responsive table tr,
.table-responsive table tr td.fixed-left,
.table-responsive table tr td.fixed-right {background: #fff;}
.table-responsive table tr:nth-child(even),
.table-responsive table tr:nth-child(even) td.fixed-left,
.table-responsive table tr:nth-child(even) td.fixed-right {background: #f2fbff;}


/*--Table--*/

/*---CUSTOM STYLES---*/

.authorize video {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
}

#imagelightbox
{
    position: fixed;
    z-index: 1000;
    -ms-touch-action: none;
    touch-action: none;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    background-color: transparent;
    padding: 10px;
}
#imagelightbox>.loader{
    z-index: 0;
    display: block;
}
#imagelightbox>img{
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#imagelightbox>.control-left,
#imagelightbox>.control-right{
    z-index: 9999;
    position: fixed;
    top:50%;
    height: 110px;
    width: 100px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 7em;
    margin-top: -55px;
    background-color: rgba(0,0,0,0.5);
    color:rgba(255,255,255,0.5);
    padding: 10px;
    border-radius: 10px;
}
#imagelightbox>.control-left{
    left: 15px;
    right: auto;
}
#imagelightbox>.control-left:after{
    content:'\f053';
}
#imagelightbox>.control-right{
    left:auto;
    right: 15px;
}
#imagelightbox>.control-right:after{
    content:'\f054';
}

.order-state {
  display: block;
  white-space: nowrap;
  padding: 10px;
  border-radius: 4px;
  cursor: default;
  margin-bottom: 10px;
  background: transparent;
  color: red;
  border: none;
}

.prepare-stripe-pp{
  text-align: center;
  border: 4px solid #FF5722;
}
@media screen and (max-width: 320px){
  .controls .btn-danger{
    margin-top: 10px;
  }

  .order-state{
    margin-bottom: 10px;
  }
}

/* ================================================================
   MODERN SIDEBAR & NAVIGATION — Dark Blue-Green + Brand Orange
   Brand-matched: orange = #f3791f (was #fd6c01)
   PASTE THIS AT THE VERY END OF main.css so it overrides the
   original .left-menu rules. Selector names preserved — all
   functionality intact.
   ================================================================ */
/* ----- BASE SIDEBAR ----- */
.left-menu {
    position: relative;
    display: table-cell;
    width: 265px;
    background: linear-gradient(180deg, #1e3a4c 0%, #0F2027 100%);
    min-height: 100%;
    margin: 0;
    padding: 90px 0 0 0;
    border: none;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    vertical-align: top;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.left-menu>.left-menu-wrap>ul {
    position: relative;
    display: block;
    width: 266px;
    height: auto;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ----- HEADER ----- */
.left-menu .header {
    position: relative;
    display: block;
    background: linear-gradient(90deg, #2C5364, #0F2027);
    padding: 16px 12px;
    border-bottom: 1px solid rgba(243, 121, 31, 0.15);
    text-align: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.4px;
    font-size: 14px;
}
.left-menu .header>b,
.left-menu .header>u {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    width: 100%;
    text-decoration: none;
}
.left-menu .header>i {
    position: absolute;
    font-size: 20px;
    top: 14px;
    right: 14px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color 0.25s ease, transform 0.25s ease;
}
.left-menu .header>i:hover {
    color: #f3791f;
    transform: scale(1.1);
}
/* ----- LIST ITEMS ----- */
.left-menu>.left-menu-wrap>ul li>a>span {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    float: left;
    margin-top: -18px;
    padding-left: 40px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.2s ease;
}
.left-menu>.left-menu-wrap>ul li,
.left-menu>.left-menu-wrap>ul li:hover,
.left-menu>.left-menu-wrap>ul li:focus {
    position: relative;
    display: block;
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    list-style: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.2s ease;
}
.left-menu>.left-menu-wrap>ul li.divider {
    height: 0;
    content: '';
    border-top: 1px solid rgba(243, 121, 31, 0.12);
    border-bottom: 1px solid rgba(243, 121, 31, 0.12);
    margin: 8px 0;
}
/* ----- ACTIVE ITEM ----- */
.left-menu>.left-menu-wrap>ul li.active {
    background-color: rgba(243, 121, 31, 0.1);
    border-left: 3px solid #f3791f;
}
.left-menu>.left-menu-wrap>ul li.active a {
    background-color: transparent;
    color: #fff;
}
.left-menu>.left-menu-wrap>ul li.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: -39px;
    border: 20px solid transparent;
    border-left: 20px solid rgba(243, 121, 31, 0.1);
    display: none;
}
/* ----- LINKS ----- */
.left-menu>.left-menu-wrap>ul li>a {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    padding: 15px 14px;
    text-align: left;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    border-radius: 0 6px 6px 0;
}
.left-menu>.left-menu-wrap>ul li>a:hover,
.left-menu>.left-menu-wrap>ul li>a:focus {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
}
.left-menu>.left-menu-wrap>ul li.active>a:hover,
.left-menu>.left-menu-wrap>ul li.active>a:focus {
    background-color: transparent;
    color: #fff;
    cursor: default;
}
/* ----- ICONS ----- */
.left-menu>.left-menu-wrap>ul li .fa {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}
.left-menu>.left-menu-wrap>ul li:hover>a>.fa,
.left-menu>.left-menu-wrap>ul li.active>a>.fa {
    color: #f3791f;
}
.left-menu .fa {
    float: left;
    text-align: left;
}
.left-menu>.left-menu-wrap>ul li>a>.fa:before {
    text-align: left;
    min-width: 30px;
    float: right;
    font-size: 15px;
}
/* ----- DROPDOWN MENUS ----- */
.left-menu>.left-menu-wrap>ul li>ul.dropdown-menu {
    position: relative;
    display: none;
    float: none;
    background: rgba(15, 32, 39, 0.55);
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: 0;
    min-width: 40px;
    width: 100%;
    overflow: hidden;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu {
    display: block;
    background: rgba(15, 32, 39, 0.7);
    animation: dropdownOpen 0.3s ease;
}
@keyframes dropdownOpen {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.open {
    background: rgba(243, 121, 31, 0.08);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li ul.dropdown-menu {
    background: rgba(15, 32, 39, 0.8);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li ul.dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.active {
    background: rgba(243, 121, 31, 0.12);
    border-left: 3px solid #f3791f;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.active:after {
    border-left: 20px solid rgba(243, 121, 31, 0.12);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.active a {
    color: #fff;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a {
    color: rgba(255, 255, 255, 0.75);
    padding-left: 28px;
    font-size: 13px;
    transition: all 0.2s ease;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li .fa {
    color: rgba(255, 255, 255, 0.5);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.active a .fa {
    color: #f3791f;
}
.left-menu>.left-menu-wrap>ul li>ul.dropdown-menu li a span {
    padding: 0 20px;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li ul.dropdown-menu li a span {
    padding: 0 28px;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.open ul.dropdown-menu li.open {
    background: rgba(243, 121, 31, 0.06);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li.open ul.dropdown-menu li.open ul.dropdown-menu {
    background: rgba(15, 32, 39, 0.85);
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li ul.dropdown-menu li ul.dropdown-menu li a span {
    padding: 0 35px;
}
/* ----- CARETS ----- */
.left-menu li .caret {
    position: absolute;
    top: 18px;
    right: 14px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border: 5px solid transparent;
    border-top: 5px solid rgba(243, 121, 31, 0.6);
    transition: transform 0.25s ease;
}
.left-menu li.open>a>.caret {
    top: 18px;
    border: 5px solid transparent;
    border-bottom: 5px solid #f3791f;
    transform: rotate(180deg);
}
/* ----- COLLAPSE MODE ----- */
body.collapse .left-menu li.open>.dropdown-menu {
    display: none;
}
body.collapse .left-menu .header>b,
body.collapse .left-menu li>a>span {
    padding-left: 1px;
    width: 1px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.collapse .left-menu .header>u {
    display: none;
}
body.collapse .left-menu .header>i {
    right: auto;
    left: 16px;
}
body.collapse .left-menu,
body.collapse .left-menu>.left-menu-wrap>ul {
    width: 54px;
}
body.collapse .left-menu>.left-menu-wrap>ul li ul.dropdown-menu {
    display: none;
}
/* ----- TOP NAVBAR ----- */
.navbar-main .top-menu {
    position: relative;
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
}
.navbar-main .top-menu li {
    float: right;
    height: 100%;
    border-left: 1px solid rgba(0, 0, 0, 0.04);
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease;
}
.navbar-main .top-menu li>a {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 32px 18px;
    line-height: 70px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.navbar-main .top-menu li>a:hover,
.navbar-main .top-menu li>a:focus {
    background: rgba(243, 121, 31, 0.06);
    color: #f3791f;
}
/* ----- MENU VARIANTS ----- */
.left-menu.menu-home {
    background: linear-gradient(180deg, #1e3a4c 0%, #0F2027 100%);
}
.left-menu.menu-home .header {
    background: linear-gradient(90deg, #2C5364, #0F2027);
}
.menu-home>.left-menu-wrap>ul li.dropdown.open {
    background: rgba(243, 121, 31, 0.06);
}
.menu-home>.left-menu-wrap>ul li.open>ul.dropdown-menu {
    background: rgba(15, 32, 39, 0.75);
}
.menu-home>.left-menu-wrap>ul li.open>ul.dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.menu-home.menu-home>.left-menu-wrap>ul li.active {
    background-color: rgba(243, 121, 31, 0.1);
    border-left: 3px solid #f3791f;
}
.left-menu.menu-settings .header {
    background: linear-gradient(90deg, #2C5364, #0F2027);
}
.left-menu.menu-settings {
    background: linear-gradient(180deg, #1e3a4c 0%, #0F2027 100%);
}
.left-menu.menu-settings>.left-menu-wrap>ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.left-menu.menu-settings>.left-menu-wrap>ul li.active {
    background-color: rgba(243, 121, 31, 0.12);
    border-left: 3px solid #f3791f;
}
.menu-settings>.left-menu-wrap>ul li.dropdown.open {
    background: rgba(243, 121, 31, 0.06);
}
.menu-settings>.left-menu-wrap>ul li.open>ul.dropdown-menu {
    background: rgba(15, 32, 39, 0.8);
}
.menu-settings>.left-menu-wrap>ul li.open>ul.dropdown-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
/* ----- UTILITIES ----- */
.profile-logout a {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}
.profile-logout a:hover {
    color: #f3791f;
}
.languages {
    float: right;
    margin: 12px 20px 0 20px;
}
.profile-block {
    padding: 20px 0 0 0;
}
.dropdown-menu {
    right: 0;
    left: inherit;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 8px 0;
}
.cleaner {
    clear: both;
    height: 0;
}
/* ----- SWITCHER ----- */
.switch-home .switch-circle {
    background-color: #f3791f;
}
.switch-settings .switch-circle {
    background-color: #2C5364;
}
.collapse .switch-home .switcher-btn>.switch-circle {
    background-color: #0F2027;
}
.collapse .switch-settings .switcher-btn>.switch-circle {
    background-color: #2C5364;
}
/* ===== BOLD ANIMATIONS - DARK TO ORANGE ===== */
.left-menu>.left-menu-wrap>ul li>a {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.left-menu>.left-menu-wrap>ul li>a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(243, 121, 31, 0.15) 0%, rgba(243, 121, 31, 0.25) 100%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: 0 6px 6px 0;
}
.left-menu>.left-menu-wrap>ul li>a:hover::before {
    width: 100%;
}
.left-menu>.left-menu-wrap>ul li>a:hover {
    color: #f3791f;
    padding-left: 18px;
    transition: padding-left 0.3s ease, color 0.3s ease;
}
.left-menu>.left-menu-wrap>ul li>a:hover>.fa {
    color: #f3791f;
    transform: scale(1.2);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.left-menu>.left-menu-wrap>ul li.active {
    background: linear-gradient(90deg, rgba(243, 121, 31, 0.2) 0%, rgba(243, 121, 31, 0.05) 100%);
    border-left: 4px solid #f3791f;
    animation: activePulse 2s ease-in-out infinite;
}
@keyframes activePulse {
    0%, 100% {
        border-left-width: 4px;
        box-shadow: inset 4px 0 0 #f3791f, 0 0 0 rgba(243, 121, 31, 0);
    }
    50% {
        border-left-width: 4px;
        box-shadow: inset 4px 0 0 #f3791f, 0 0 20px rgba(243, 121, 31, 0.15);
    }
}
.left-menu>.left-menu-wrap>ul li.active>a {
    color: #fff;
    font-weight: 600;
}
.left-menu>.left-menu-wrap>ul li.active>a>.fa {
    color: #f3791f;
    animation: iconGlow 2s ease-in-out infinite;
}
@keyframes iconGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(243, 121, 31, 0); }
    50% { text-shadow: 0 0 8px rgba(243, 121, 31, 0.6); }
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(1) { animation-delay: 0.05s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(2) { animation-delay: 0.1s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(3) { animation-delay: 0.15s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(4) { animation-delay: 0.2s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(5) { animation-delay: 0.25s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(6) { animation-delay: 0.3s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(7) { animation-delay: 0.35s; }
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li:nth-child(8) { animation-delay: 0.4s; }
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(243, 121, 31, 0.2) 0%, rgba(243, 121, 31, 0.1) 100%);
    transition: width 0.3s ease;
    z-index: -1;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a:hover::before {
    width: 100%;
}
.left-menu>.left-menu-wrap>ul li.open>ul.dropdown-menu li a:hover {
    color: #f3791f;
    padding-left: 30px;
    transition: padding-left 0.25s ease, color 0.25s ease;
}
.left-menu li .caret {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.left-menu li.open>a>.caret {
    transform: rotate(180deg);
    border-top-color: #f3791f;
    border-bottom-color: #f3791f;
}
.left-menu .header>i:hover {
    transform: rotate(90deg) scale(1.1);
    color: #f3791f;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
body.collapse .left-menu,
body.collapse .left-menu>.left-menu-wrap>ul {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.left-menu>.left-menu-wrap>ul li.divider {
    animation: dividerPulse 3s ease-in-out infinite;
}
@keyframes dividerPulse {
    0%, 100% { border-color: rgba(243, 121, 31, 0.12); }
    50% { border-color: rgba(243, 121, 31, 0.35); }
}
/* ===== MOBILE MENU BOLD ANIMATIONS ===== */
.mobile-menu {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.open-mobile-menu {
    animation: menuSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes menuSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.open-mobile-menu a,
.open-mobile-menu div.item-reminders {
    opacity: 0;
    transform: translateX(40px);
    animation: mobileSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.open-mobile-menu a:nth-child(1),
.open-mobile-menu div.item-reminders:nth-child(1) { animation-delay: 0.1s; }
.open-mobile-menu a:nth-child(2),
.open-mobile-menu div.item-reminders:nth-child(2) { animation-delay: 0.15s; }
.open-mobile-menu a:nth-child(3),
.open-mobile-menu div.item-reminders:nth-child(3) { animation-delay: 0.2s; }
.open-mobile-menu a:nth-child(4),
.open-mobile-menu div.item-reminders:nth-child(4) { animation-delay: 0.25s; }
.open-mobile-menu a:nth-child(5),
.open-mobile-menu div.item-reminders:nth-child(5) { animation-delay: 0.3s; }
.open-mobile-menu a:nth-child(6),
.open-mobile-menu div.item-reminders:nth-child(6) { animation-delay: 0.35s; }
.open-mobile-menu a:nth-child(7),
.open-mobile-menu div.item-reminders:nth-child(7) { animation-delay: 0.4s; }
.open-mobile-menu a:nth-child(8),
.open-mobile-menu div.item-reminders:nth-child(8) { animation-delay: 0.45s; }
.open-mobile-menu a:nth-child(9),
.open-mobile-menu div.item-reminders:nth-child(9) { animation-delay: 0.5s; }
.open-mobile-menu a:nth-child(10),
.open-mobile-menu div.item-reminders:nth-child(10) { animation-delay: 0.55s; }
@keyframes mobileSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
.mobile-menu a {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}
.mobile-menu a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(243, 121, 31, 0.25) 0%, rgba(243, 121, 31, 0.1) 100%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.mobile-menu a:hover::before {
    width: 100%;
}
.mobile-menu a:hover {
    color: #f3791f;
    padding-left: 28px;
    border-left: 3px solid #f3791f;
}
.close-menu-btn:hover {
    animation: closeRotate 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(243, 121, 31, 0.2);
    border-color: #f3791f;
}
@keyframes closeRotate {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}
.mobile-menu .profile-settings:hover {
    animation: avatarPulse 0.6s ease;
    border-color: #f3791f;
}
@keyframes avatarPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ================================================================
   CARDFIX :: catalogue course-card cohesion. Appended at the end so it wins over the
   original .all-courses-content-block rules above without editing them.
   Scoped entirely to .all-courses-content-block, so it reaches the five catalogue views
   that render that class -- Home, Courses (All Courses), Bundles, Tariff, Bundle -- and
   nothing else. Consistent card styling across those five is intended.
   The static www/all-courses.html does NOT use this class and is unaffected.
   Measured problem: title, duration and 'Certificate valid for' were already on one left
   axis; the price (.cart-summ, right-aligned 13.5px) and the tertiary link
   (.buy-again-link, centred) were the two elements breaking it.
   No brand token is redefined and brand-rules.js is untouched. Status semantics, images,
   card widths and purchase logic are all left alone.
   ================================================================ */
.all-courses-content-block-title{margin-bottom:5px !important;text-align:left !important}
/* price: same left axis as the title, orange accent, strong enough to anchor the row */
.all-courses-content-block .cart-summ{text-align:left !important;font-size:20px !important;
  font-weight:800 !important;color:#D95F0E !important;letter-spacing:-.015em;margin-top:2px}
/* tertiary links: navy, on the axis, clearly subordinate to the primary button */
.all-courses-content-block .buy-again-link{display:block;text-align:left !important;
  color:#123A5C !important;font-weight:700 !important;font-size:12.5px !important;
  margin-top:8px;text-decoration:none}
.all-courses-content-block .buy-again-link:hover{text-decoration:underline}
/* primary action: full width, navy comes from .lms-btn--primary already */
.all-courses-content-block .lms-btn--primary{width:100%;justify-content:center;margin-top:9px}

/* ================================================================
   UKUI-APPROVED :: course-card standard. 2026-08-19.
   Implements the approved direction: every title on one left axis, a fixed
   two-line title block so every call-to-action lands on the same baseline,
   equal card heights, the action rail pinned to the card floor, and the
   learner actions (Study / Activate / View certificate) returned to navy.

   Written to be SELF-SUFFICIENT. The newest staged Home.php already carries
   most of this in its own <style> block, but that file is not confirmed live,
   and an inline <style> later in the document outranks an external sheet at
   equal specificity. Every selector here is therefore one class more specific
   than the rule it supersedes, and the handful that must beat an existing
   !important say so explicitly. Loading this against either Home.php gives the
   same result; loading it twice changes nothing.

   Scoped entirely to .all-courses-content-block, so it reaches only the
   catalogue views that render that class. Purchase logic, card widths, status
   semantics, images and JS hooks are untouched.
   ================================================================ */

/* ---- shell: a column that fills its grid track, so sibling cards match ---- */
.all-courses-content-block{display:flex; flex-direction:column; height:100%}

/* ---- reading order ------------------------------------------------------
   The template emits img -> meta -> title -> cart -> buttons. The course name
   is what a learner scans, so it sits directly under the image. Reordered by
   flex order alone; no PHP markup is moved. */
.all-courses-content-block > .all-courses-content-block-img{order:1}
.all-courses-content-block > .all-courses-content-block-title{order:2}
.all-courses-content-block > .course-card-description__meta{order:3}
.all-courses-content-block > .item-tariff-cart-row{order:4}
.all-courses-content-block > .all-courses-content-block-btn-block{order:5}

/* ---- title --------------------------------------------------------------
   The legacy rule made this a CENTRING flex container with min-height:3.2em,
   which centred the text both ways: horizontally against the metadata axis,
   and vertically inside a box taller than one line. Both are wrong, but for
   different reasons, and only the horizontal one is a defect. The two-line
   reservation is KEPT - it is what puts a one-line and a two-line card's
   button on the same baseline - and the text is pinned to the top of it. */
.all-courses-content-block > .all-courses-content-block-title{
  display:block !important;
  text-align:left !important;
  min-height:2.56em;              /* exactly two lines at line-height 1.28 */
  padding:16px 16px 0 !important; /* same 16px axis as metadata and the CTA rail */
  margin:0 !important;
  font-family:var(--lms-font);
  font-size:16.5px; font-weight:650; line-height:1.28; letter-spacing:-.013em;
  color:var(--lms-ink); text-transform:none; text-wrap:balance;
}
/* Titles are interpolated from the database unescaped, so a title row that
   carries its own <p style="text-align:center"> or <center> can still centre
   itself whatever the class says - this is the actual mechanism behind "PPE
   left, Manual Handling centred". These rules neutralise the ALIGNMENT and
   BOX parts of that inline markup so the grid is correct before the data is
   cleaned and stays correct after. The content itself is left intact. */
.all-courses-content-block > .all-courses-content-block-title *{
  text-align:inherit !important;
  display:inline !important;
  float:none !important;
  margin:0 !important; padding:0 !important;
  font-size:inherit !important; font-weight:inherit !important;
  line-height:inherit !important; color:inherit !important;
}
.all-courses-content-block > .all-courses-content-block-title center{display:inline !important}
/* One card per row has no neighbour to align to, so the reservation would only
   add a dead line of space. */
@media (max-width:575.98px){
  .all-courses-content-block > .all-courses-content-block-title{min-height:0}
}

/* ---- metadata: same axis, subordinate weight ---- */
.all-courses-content-block > .course-card-description__meta{
  padding:6px 16px 0; margin:0; text-align:left;
  font-family:var(--lms-font); font-size:12px; line-height:1.4; color:var(--lms-ink-3);
}

/* ---- action rail: pinned to the card floor, inset from the card edge ----
   margin-top:auto is what makes "equal card heights" visible as equal card
   RHYTHM: the rail is pushed to the bottom of whatever height the grid gives
   the card, so every button in a row shares one baseline. */
.all-courses-content-block > .all-courses-content-block-btn-block{
  margin-top:auto;
  display:flex; flex-direction:column; gap:8px;
  padding:16px;
}

/* ---- the legacy button wrappers become inert boxes ----------------------
   .all-courses-content-block-study / -buy were themselves gradient buttons
   with the real <a> inside. The <a> is now the button, so the wrapper must
   stop painting. */
.all-courses-content-block .all-courses-content-block-study,
.all-courses-content-block .all-courses-content-block-buy,
.all-courses-content-block .all-courses-content-block-study.study-active{
  display:block !important; width:100% !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important; margin:0 !important;
  transform:none !important; line-height:0 !important;
}
.all-courses-content-block .all-courses-content-block-study:hover,
.all-courses-content-block .all-courses-content-block-buy:hover,
.all-courses-content-block .all-courses-content-block-study.study-active:hover{
  background:none !important; box-shadow:none !important; transform:none !important;
}

/* ---- PRIMARY NAVY: Study · Activate · View certificate ------------------
   Approved Study CTA, Option 1 "inset full-width": 44px tall, 10px radius,
   full width INSIDE the card's 16px padding with the rail's 16px of air above.
   Full width is what keeps every CTA on one baseline across the grid; the
   inset and the radius are what stop it reading as a flat strip.
   The .study-active rule it replaces uses !important, so this must too. */
.all-courses-content-block .all-courses-content-block-study.study-active > a,
.all-courses-content-block .all-courses-content-block-buy > a,
.all-courses-content-block > .all-courses-content-block-btn-block a.course-done-btn{
  display:flex !important; align-items:center; justify-content:center; gap:9px;
  width:100% !important; height:44px !important; padding:0 20px !important;
  box-sizing:border-box;
  background:var(--lms-brand) !important; background-image:none !important;
  color:#fff !important; border:1px solid transparent !important;
  border-radius:10px !important; box-shadow:var(--lms-sh-1);
  font-family:var(--lms-font); font-size:14.5px !important; font-weight:640 !important;
  letter-spacing:-.005em !important; line-height:1 !important;
  text-transform:none !important; text-decoration:none !important;
  white-space:nowrap; text-align:center; margin:0 !important;
  transition:background-color .16s ease, box-shadow .16s ease;
}
.all-courses-content-block .all-courses-content-block-study.study-active > a:hover,
.all-courses-content-block .all-courses-content-block-buy > a:hover,
.all-courses-content-block > .all-courses-content-block-btn-block a.course-done-btn:hover{
  background:var(--lms-brand-hover) !important; color:#fff !important;
  box-shadow:var(--lms-sh-2); transform:none !important;
}
.all-courses-content-block .all-courses-content-block-study.study-active > a:focus-visible,
.all-courses-content-block .all-courses-content-block-buy > a:focus-visible,
.all-courses-content-block > .all-courses-content-block-btn-block a.course-done-btn:focus-visible{
  outline:2px solid var(--lms-focus); outline-offset:2px;
}
/* The arrow is the "go" affordance the approved CTA carries. It is decorative
   - the label already says Study - so it is a background image on a
   pseudo-element and never reaches the accessibility tree. */
.all-courses-content-block .all-courses-content-block-study.study-active > a::before{
  content:""; flex:0 0 auto; width:16px; height:16px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
/* The certificate action on a card is a NAVY view action. Orange on a card
   would compete with the one orange the system reserves - Download
   certificate, on the certificate page itself. */
.all-courses-content-block > .all-courses-content-block-btn-block a.course-done-btn::before{
  content:""; flex:0 0 auto; width:17px; height:17px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m8.5 13.5-1 7 4.5-2.5 4.5 2.5-1-7'/%3E%3C/svg%3E") center/17px 17px no-repeat;
}

/* ---- locked states stay legibly unavailable ---- */
.all-courses-content-block .all-courses-content-block-study.btn-locked > a,
.all-courses-content-block .all-courses-content-block-buy.btn-locked > a{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:44px !important; padding:0 20px !important;
  box-sizing:border-box;
  background:var(--lms-surface-sunk) !important; background-image:none !important;
  color:var(--lms-ink-3) !important; border:1px solid var(--lms-border) !important;
  border-radius:10px !important; box-shadow:none !important;
  font-size:14.5px !important; font-weight:620 !important;
  text-transform:none !important; text-decoration:none !important;
  cursor:not-allowed !important; margin:0 !important;
}

/* ---- SECONDARY: Review course, a ghost so the pair is not two equal choices ---- */
.all-courses-content-block > .all-courses-content-block-btn-block a.course-review-btn{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:36px !important; padding:0 12px !important;
  box-sizing:border-box;
  background:transparent !important; background-image:none !important;
  color:var(--lms-ink-2) !important; border:1px solid transparent !important;
  border-radius:8px !important; box-shadow:none !important;
  font-size:13px !important; font-weight:590 !important;
  text-transform:none !important; text-decoration:none !important;
}
.all-courses-content-block > .all-courses-content-block-btn-block a.course-review-btn:hover{
  background:var(--lms-surface-sunk) !important; color:var(--lms-ink) !important;
}

/* ---- TEXT LINK: on the axis, navy, clearly subordinate ---- */
.all-courses-content-block .buy-again-link{
  display:block; text-align:left !important;
  color:var(--lms-brand) !important; font-weight:700 !important;
  font-size:12.5px !important; margin:2px 0 0; text-decoration:none;
}
.all-courses-content-block .buy-again-link:hover{
  color:var(--lms-brand-hover) !important; text-decoration:underline;
}

/* ---- COMMERCE: Add to basket keeps the accent, gains the shared geometry --
   NOT changed to navy. This is the purchase action on a course the learner
   does not own, and lms-system.css reserves the accent for commerce. It is
   the one orange left in the grid and it is called out in the report; say the
   word and it becomes a navy primary or a secondary outline in one line. */
.all-courses-content-block a.btn-pay{
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:44px !important; padding:0 20px !important;
  box-sizing:border-box;
  background:var(--lms-accent) !important; background-image:none !important;
  color:#fff !important; border:1px solid transparent !important;
  border-radius:10px !important; box-shadow:var(--lms-sh-1);
  font-size:14.5px !important; font-weight:640 !important;
  letter-spacing:-.005em !important; line-height:1 !important;
  text-transform:none !important; text-decoration:none !important;
  margin-bottom:0 !important; transform:none !important;
}
.all-courses-content-block a.btn-pay:hover{
  background:var(--lms-accent-hover) !important; color:#fff !important;
  transform:none !important; box-shadow:var(--lms-sh-2);
}
.all-courses-content-block a.btn-pay.disabled{
  opacity:.45; cursor:not-allowed;
}
.all-courses-content-block a.btn-pay.disabled:hover{
  background:var(--lms-accent) !important; box-shadow:var(--lms-sh-1);
}

/* ---- UKUI-APPROVED :: CTA baseline ---------------------------------------
   Pinning the whole rail to the card floor equalises the BOTTOM of every card
   but not the PRIMARY action, because a completed card carries three rows
   (View certificate, Review course, Buy again) where an active card carries
   two. Measured at 1440: Study landed 41px below View certificate in the same
   row - the exact "CTA baseline" defect the audit named.

   Because the title block is now a fixed two lines, everything ABOVE the rail
   is the same height on every card. Anchoring the rail to the top of that
   identical stack therefore puts every primary action on one baseline exactly,
   without depending on how many secondary rows a given state adds below it.
   Cards with fewer actions leave the unused space at the floor - which the
   grid was already giving them. This replaces margin-top:auto, whose whole
   purpose (a common button position) it achieves more reliably. */
.all-courses-content-block > .all-courses-content-block-btn-block{
  box-sizing:border-box;
  margin-top:0;                 /* was auto - see the note above */
  justify-content:flex-start;
}

/* ---- UKUI-APPROVED :: the price is information, not an action ------------
   An earlier pass painted .cart-summ in the accent at 20px/800, which put a
   third orange on the grid beside Add to basket and, on an owned card, an
   orange "£0.00" directly above a navy Study. Orange is reserved for the
   terminal certificate action, so the price takes ink. Size and weight are
   kept - it still needs to anchor the row. */
.all-courses-content-block .item-tariff-cart-row .cart-summ,
.all-courses-content-block .cart-summ{
  color:var(--lms-ink) !important;
  font-size:17px !important;
  font-weight:750 !important;
  letter-spacing:-.015em;
}


/* ================================================================
   UKCARD-CENTRED :: approved centred card body. 2026-08-19.
   Appended after the UKUI-APPROVED block above and deliberately supersedes its
   left-axis rules - same specificity, later in the file, so the cascade does
   the work and nothing above needed editing or deleting. Remove this block and
   the previous left-aligned standard returns intact.

   Centres the whole card body: title, metadata, quantity/price and the
   secondary-action zone all resolve to one vertical axis, and every zone is a
   fixed height, so an active card and a completed card are the same object.

   Every selector here is at least one class more specific than the rule it
   supersedes, which matters because Home.php's own <style> block is inline and
   therefore loads AFTER this file in production. Verified in that order.

   CSS only - no markup change. Purchase controls, their handlers and their
   data attributes are untouched.
   ================================================================ */

/* ---- 1 · TITLE : centred, one fixed zone on every card -------------------
   The zone is unchanged in height (two lines reserved) - only the axis moves.
   Text still starts at the TOP of the zone so a one-line and a two-line title
   share the same first baseline rather than floating to different heights. */
.all-courses-content-block > .all-courses-content-block-title{
  text-align:center !important;
  padding:16px 18px 0 !important;
  min-height:2.56em;
}
/* Database title rows arrive unescaped and may carry their own alignment.
   `inherit` makes them follow the card rule whatever they say, so a row that
   says left, right or center all render centred. */
.all-courses-content-block > .all-courses-content-block-title *{
  text-align:inherit !important;
  display:inline !important;
  float:none !important;
  margin:0 !important; padding:0 !important;
  font-size:inherit !important; font-weight:inherit !important;
  line-height:inherit !important; color:inherit !important;
}
.all-courses-content-block > .all-courses-content-block-title center{display:inline !important}

/* ---- 2 · METADATA : centred, one compact row, fixed zone ----------------
   Duration and certificate validity sit on one line separated by a middot.
   min-height holds the zone open when a course has no duration, so the row
   below cannot shift up on one card and not another. */
.all-courses-content-block > .course-card-description__meta{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 8px;
  text-align:center;
  padding:8px 14px 0 !important;
  min-height:30px;
  font-size:12px; line-height:1.4; color:var(--lms-ink-3);
}
.all-courses-content-block .course-card-description__meta__duration{
  display:inline-flex; align-items:center; gap:5px;
}
.all-courses-content-block .course-card-description__meta__duration
  + .course-card-description__meta__duration::before{
  content:"\00b7"; margin-right:6px; color:var(--lms-border-strong);
}

/* ---- 3 · QUANTITY / PRICE : one balanced cluster on the axis -------------
   The stepper was pinned left and the price pushed right by margin-left:auto,
   which was the single strongest left/right pull in the composition. Both now
   sit as one centred cluster. Nothing about the control changes - same input,
   same handlers, same data attributes. */
.all-courses-content-block > .item-tariff-cart-row{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap:14px;
  padding:10px 14px 0 !important;
  margin:0 !important;
  min-height:56px;
}
.all-courses-content-block .item-tariff-cart-row .cart-summ,
.all-courses-content-block .cart-summ{
  margin-left:0 !important;
  color:var(--lms-ink) !important;
  font-size:17px !important; font-weight:750 !important;
  letter-spacing:-.015em;
}

/* ---- 4 · PRIMARY CTA -----------------------------------------------------
   Geometry is approved and unchanged from the block above: navy, 44px, 10px radius,
   full width inside the card's padding. It is the first child of the action
   rail and the rail is top-anchored under an identical stack, so the baseline
   is the same on every card by construction. */

/* ---- 5 · SECONDARY ACTIONS : one low-weight centred zone ----------------
   Review course was a 36px ghost BUTTON while Buy again was a 12.5px text
   link, so a completed card carried a second button-shaped object that an
   active card did not - the structural difference the rework is about. Both
   are now the same 18px centred text link, and the rail reserves the height
   of the tallest variant so a card with one secondary action occupies exactly
   the same space as a card with two. */
.all-courses-content-block > .all-courses-content-block-btn-block{
  box-sizing:border-box;
  margin-top:0;
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;
  padding:14px 14px 16px !important;
  min-height:130px;   /* the tallest variant: 44 + 10 + 18 + 10 + 18 + 30 padding */
}
.all-courses-content-block > .all-courses-content-block-btn-block a.course-review-btn,
.all-courses-content-block .buy-again-link{
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  text-align:center !important;
  font-size:12.5px !important;
  font-weight:640 !important;
  line-height:18px !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
}
.all-courses-content-block > .all-courses-content-block-btn-block a.course-review-btn{
  color:var(--lms-ink-3) !important;
}
.all-courses-content-block > .all-courses-content-block-btn-block a.course-review-btn:hover{
  color:var(--lms-ink) !important; text-decoration:underline !important; background:none !important;
}
.all-courses-content-block .buy-again-link{
  color:var(--lms-brand) !important;
}
.all-courses-content-block .buy-again-link:hover{
  color:var(--lms-brand-hover) !important; text-decoration:underline !important;
}

/* ---- 6 · badges stay where they are -------------------------------------
   The status chip and the price chip sit on the image, above the body axis.
   Centring them would put two chips on one line fighting for the middle; they
   are corner markers, not part of the composition below the image. */


/* ================================================================
   UKCARD-ACCENT :: approved brand accent + two-row metadata. 2026-08-19.
   Appended after UKCARD-CENTRED and refines it. Consolidated: the accent
   line lives in exactly one place (between the title and the metadata), so
   there is no rule here that another rule immediately cancels. Remove this
   block and the approved centred layout returns unchanged.

   Semantic rule this protects:
     NAVY   normal primary actions - Study, Resume, View certificate
     ORANGE the strongest/final action - Download certificate, on the cert page
     GREEN  Certified status
   Orange appears below only as an ICON inside a navy button and as a small
   non-interactive mark. No button changes colour, so Download certificate
   stays the only fully orange control in the system.

   Card width, image height, CTA height and the equal-CTA-baseline property
   are untouched. CSS only - no markup change.
   ================================================================ */

/* ---- metadata: accent line, then two centred rows -----------------------
   One flex row centred "2-3 hours - Certificate valid for: 3 years" as a
   GROUP. The second label is about three times the width of the first, so the
   group's optical centre sat well right of the card axis while its geometric
   centre measured exact: it read off-centre and measured centred. Two stacked
   full-width rows make each row's own centre the card axis, whatever the label
   length. The inline middot separator goes with the one-row layout.

   min-height is fixed at the two-row height so a course with no duration
   cannot shorten the zone and shift everything below it on that one card. */
.all-courses-content-block > .course-card-description__meta{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  padding:11px 14px 0 !important;
  min-height:64px;
  text-align:center;
}
/* the short centred accent mark. Chosen over a full-width 3px rule: a rule
   reads as a divider and cuts the card in two, which fights the single centre
   axis the composition is built on. Decorative, so it never reaches the
   accessibility tree. */
.all-courses-content-block > .course-card-description__meta::before{
  content:"";
  flex:0 0 auto;
  width:40px; height:3px;
  margin:0 0 9px;
  border-radius:2px;
  background:var(--lms-accent);
  transition:width .22s cubic-bezier(.2,.7,.3,1);
}
/* each row is the full content width with its text centred - that is what puts
   both rows on one axis rather than in one bounding box */
.all-courses-content-block .course-card-description__meta__duration{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px;
  width:100%;
  margin:0;
  text-align:center;
  font-family:var(--lms-font);
  font-size:12.5px; font-weight:560; line-height:1.35; letter-spacing:0;
  color:var(--lms-ink-3);
}
.all-courses-content-block .course-card-description__meta__duration > div{
  display:inline-flex; align-items:center;
}
.all-courses-content-block .course-card-description__meta .icon-container{
  width:14px; height:14px; opacity:.75;
}
.all-courses-content-block .course-card-description__meta svg{
  width:14px; height:14px; display:block;
}
.all-courses-content-block .course-card-description__meta__duration
  + .course-card-description__meta__duration::before{
  content:none !important;
  margin:0 !important;
}

/* ---- Study keeps its navy; only the arrow takes the accent --------------
   #F6923D rather than the flat --lms-accent token: the token is tuned for
   orange ON WHITE and goes muddy on the navy fill. Same hue lifted for the
   dark ground; at 16px it clears 3:1 against #123A5C, the threshold that
   applies to a graphical object. */
.all-courses-content-block .all-courses-content-block-study.study-active > a::before{
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6923D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
/* ---- View certificate keeps its navy; the medal takes the accent -------- */
.all-courses-content-block > .all-courses-content-block-btn-block a.course-done-btn::before{
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6923D' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m8.5 13.5-1 7 4.5-2.5 4.5 2.5-1-7'/%3E%3C/svg%3E") center/17px 17px no-repeat;
}

/* ---- hover: warmth, not repaint ---------------------------------------- */
@media (hover:hover){
  .all-courses-content-block:hover{
    border-color:var(--lms-accent-border);
    box-shadow:0 8px 24px rgba(217,95,14,.13), 0 2px 6px rgba(12,27,42,.06);
  }
  .all-courses-content-block:hover > .course-card-description__meta::before{width:56px}
}
@media (prefers-reduced-motion:reduce){
  .all-courses-content-block > .course-card-description__meta::before{transition:none}
}

/* ---- status semantics unchanged: Active orange, Certified green -------- */

/* SC-TBLFILTER-001: фільтр у випадайці заголовка таблиці.
   Було: .form-control і .input-group-addon малювались як два окремі
   заокруглені блоки, плюс кільце фокуса на полі й друге на li.dropdown-item.
   Стало: один суцільний контрол, одне кільце. Reversal: видалити цей блок. */
.dropdown-menu > li.dropdown-item .input-group{
  display:flex; width:100%; margin:0;
}
.dropdown-menu > li.dropdown-item .input-group > .form-control{
  flex:1 1 auto; width:auto; min-width:0; height:38px;
  border:1px solid #cfd8e3; border-right:0;
  border-radius:8px 0 0 8px; box-shadow:none; outline:none;
}
.dropdown-menu > li.dropdown-item .input-group > .form-control:focus{
  border-color:#fd6c01; box-shadow:none; outline:none;
}
.dropdown-menu > li.dropdown-item .input-group > .input-group-addon{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:42px; height:38px; padding:0;
  border:1px solid #cfd8e3; border-left:0;
  border-radius:0 8px 8px 0; background:#f5f7fa; cursor:pointer;
}
.dropdown-menu > li.dropdown-item .input-group > .form-control:focus + .input-group-addon{
  border-color:#fd6c01;
}
.dropdown-menu > li.dropdown-item:focus,
.dropdown-menu > li.dropdown-item:focus-within{
  outline:none; box-shadow:none;
}

/* SC-RTSTATUS-002: the row menu's Status item used to render a broken icon (fa fa-fa-lightbulb)
   and looked identical whether the record was on or off. The list template already adds
   .active when status>0 — this colours it: green = active, red = switched off. */
.dropdown-menu > li.item-status > a > i.fa{color:#c0392b}
.dropdown-menu > li.item-status > a > i.fa.active{color:#18a05a}
.dropdown-menu > li.item-status > a{font-weight:600}
.dropdown-menu > li.item-status > a > i.fa:before{content:"\f0eb"}

/* ==== B-POPUP-STYLE-1 (16-DEFECTS #3/#12, A 12:44): old teal->green system popups/buttons -> our palette (navy #012353 / orange #fd6c01),
   the login-page popup sits over the login page itself (no grey empty page), message text in ink, not red. Markup unchanged. ==== */
.message{background:rgba(1,35,83,.38) !important}
.message .overlay,.message .wrapper{background:transparent !important}
.message .content{background:#fff !important;border-radius:18px !important;overflow:hidden !important;border:0 !important;
  box-shadow:0 24px 60px rgba(1,35,83,.28) !important}
.message .header{background:#fff !important;min-height:0 !important;border-bottom:1px solid #EEF1F6 !important;position:relative}
.message .header::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#012353 0%,#1B3E63 45%,#fd6c01 100%)}
.message .header .menu-left span{color:#0F2740 !important;font-weight:700 !important;font-size:15px !important}
.message .header .menu-right .toggle,.message .header .menu-right i,.message .header .menu-right .toggle::before{color:#64748B !important}
.message .body .modal-body .form-group{color:#0F2740 !important;font-size:15px !important;line-height:1.55 !important}
.message.btn-alert .body .modal-body .form-group{color:#0F2740 !important}
.message.btn-alert .body .modal-body .form-group font,.message.btn-alert .body .modal-body .form-group span{color:inherit !important}
.message .body .modal-body .controls .btn-yes{background:linear-gradient(135deg,#fd6c01,#e55a00) !important;border:0 !important;color:#fff !important}
.message .body .modal-body input.form-control:focus{border-color:#fd6c01 !important}
body .profile-modern .btn-danger{background:#fff !important;color:#0F2740 !important;border:1.5px solid #F6C79A !important;box-shadow:none !important}
body .profile-modern .btn-danger:hover{background:#FFF3E7 !important;border-color:#EFAF74 !important;transform:none}
/* login-page popup action buttons (added by core.js B-POPUP-STYLE-1, labels copied from the page itself) */
.message .sc-pop-acts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.message .sc-pop-acts a{display:flex;align-items:center;justify-content:center;height:48px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none !important;cursor:pointer}
.message .sc-pop-acts a.sc-pop-login{background:linear-gradient(135deg,#fd6c01,#e55a00);color:#fff !important;box-shadow:0 8px 20px rgba(253,108,1,.28);text-transform:uppercase;letter-spacing:.06em}
.message .sc-pop-acts a.sc-pop-forgot{background:#F8FAFC;border:1px solid #E2E8F0;color:#334155 !important}
.message .sc-pop-logo{display:block;margin:4px auto 14px;height:44px;width:auto}
/* login-page popup: no empty title bar, close button in the corner, compact body */
.message.sc-pop .header{border-bottom:0 !important;min-height:0 !important;height:4px;padding:0 !important}
.message.sc-pop .header .menu-left{display:none !important}
.message.sc-pop .header .menu-right{position:absolute !important;right:10px;top:12px;z-index:3}
.message.sc-pop .body .modal-body{padding:26px 26px 22px !important;text-align:center}
.message.sc-pop .body .modal-body .form-group{margin-bottom:0 !important;text-align:center}
.message.sc-pop .controls:empty,.message.sc-pop .col-md-12:empty{display:none}
/* mobile (Alex 13:43, 400px): the card never wider than the screen, no side stripe, no horizontal scroll */
.message .content{border-left:0 !important;border-right:0 !important}
.message .content::before,.message .content::after{display:none !important}
.message .body .modal-body .form-group{overflow-wrap:anywhere}
@media (max-width:600px){
  .message{overflow-x:hidden !important}
  .message .form,.message .wrapper{width:100% !important;max-width:100vw !important;box-sizing:border-box !important}
  .message .wrapper{padding:0 12px !important}
  .message .content{width:auto !important;max-width:calc(100vw - 24px) !important;min-width:0 !important;margin:0 auto !important;
    box-sizing:border-box !important;left:auto !important;right:auto !important;transform:none !important}
}
/* v2 (Alex 14:4x): the popup in our ORANGE, new format - orange header band with the close button, white body */
.message .header{background:linear-gradient(135deg,#fd6c01 0%,#e55a00 100%) !important;border-bottom:0 !important;min-height:52px !important}
.message .header::before{display:none !important}
.message .header .menu-left span{color:#fff !important}
.message .header .menu-right .toggle,.message .header .menu-right i,.message .header .menu-right .toggle::before{color:#fff !important;opacity:1 !important}
.message.sc-pop .header{height:auto !important;min-height:52px !important;padding:0 !important}
.message.sc-pop .header .menu-right{top:50% !important;transform:translateY(-50%)}
.message .sc-pop-acts a.sc-pop-forgot{background:#fff !important;border:1.5px solid #F6C79A !important;color:#C2410C !important}
.message .sc-pop-acts a.sc-pop-forgot:hover{background:#FFF3E7 !important}