.profile-page {
  position: relative;
  overflow: hidden;
}

.profile-page .pointer-event {
  cursor: pointer;
}

.profile-page .item {
  margin: 0;
  padding: 15px;
  background-color: #FFFFFF;
}

.profile-page .item.black {
  background-color: black;
  padding: unset;
}

.profile-page .menu {
  background: #333333;
  color: white;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.profile-page .item .menu-item {
  font-family: 'Avenir-Next-Bold', sans-serif;
  cursor: pointer;
  margin-bottom: 10px;
  opacity: 1;
}

.profile-page .item .menu-item.active {
  opacity: 1;
  color: #ff0000;
}

.profile-page .item .menu-item.disabled {
  opacity: 0.5;
}

.profile-page .item .cell-header {
  padding: 30px;
  background: #ff0000;
}

.profile-page .item .tbl-content {
  width: 100%;
}

.profile-page .item .block-btn .left img,
.profile-page .item .block-btn .right img {
  width: 30px;
  height: auto;
  position: absolute;
  top: calc(50% - 4px);
  right: 20px;
}

.profile-page .item .block-btn .left {
  padding-right: 5px !important;
  margin: 10px 0;
  padding: 0;
}

.profile-page .item .block-btn .right {
  padding-left: 5px !important;
  margin: 10px 0;
  padding: 0;
}

.profile-page .item .block-btn div a {
  width: 100%;
}

.profile-page .item .row {
  vertical-align: middle;
}

.profile-page .item .cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.profile-page .item .cell-header .sub-item {
  color: #cdcdcd;
}

/*Information*/

.profile-page .information {
  /*height: 100vh;*/
  min-height: 768px;
}

.profile-page .vehicle .item {
  padding: unset !important;
}

.profile-page .vehicle .exterior-item {
  background-color: #FFFFFF;
  height: 100vh;
}

.profile-page .vehicle .exterior-item .content {
  margin-left: 10%;
  margin-right: 10%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.profile-page .vehicle .not-found-vehicle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.profile-page .vehicle .vehicle-header {
  height: 100vh;
  min-height: 768px;
}

.profile-page .vehicle .vehicle-body {
  height: 100vh;
  min-height: 768px;
}

.profile-page .vehicle .block-build {
  position: relative;
  top: 0;
}
.profile-page .information .box .box-body .col-md-6 .text-right{
  width: 100%;
  display: inline-block;
}
.profile-page .information .tbl-content {
  width: 100%;
}

.profile-page .information .accessories .tbl-content {
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow-y: hidden;
}

.profile-page .information .accessories .tbl-content:hover {
  overflow-y: scroll;
}

.profile-page .information .tbl-content .row {
  display: table-row;
  vertical-align: middle;
  padding-bottom: 20px;
}

.profile-page .information .tbl-content .row .cell {
  display: table-cell;
  vertical-align: middle;
}

.profile-page .information .img-item {
  width: 150px;
  height: auto;
}

.profile-page .vehicle .exterior-item{
  min-height: 700px;
}

.profile-page .information .box.sales-agreement .box-header {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .information .box.sales-agreement {
  position: relative;
  height: 200px;
  min-height: 150px;
  border: solid 2px #D0021B;
  background-color: #D0021B;
}

.profile-page .information .box.deposit .box-header {
  background-color: #000000;
  color: #B0B0B0;
}

.profile-page .information .box.deposit:hover .box-header {
  color: #ffffff;
}

.profile-page .information .box.deposit {
  position: relative;
  height: 200px;
  min-height: 200px;
  border: solid 2px #B0B0B0;
  background-color: #000000;
  color: white;
}

.profile-page .information .box:hover.deposit {
  color: #D0021B !important;
  border: solid 2px #D0021B;
}

.profile-page .information .box.deposit .btn-deposit {
  background-color: #B0B0B0;
  color: #FFFFFF;
  width: auto;
  min-width: 165px;
}

.profile-page .information .box.deposit .btn-deposit:hover {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .information .box.box-payment-detail {
  position: relative;
  top: 0;
  background-color: black;
}

.profile-page .information .box.box-payment-detail .box-header,
.profile-page .information .box.box-payment-detail .box-body {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .sub {
  color: #cdcdcd;
  font-size: 12px;
}

@media only screen and (max-width: 1024px) {
  .profile-page .information {
    padding-top: 60px;
  }
}

.profile-page hr {
  margin-top: 10px;
  margin-bottom: 10px;
  clear: both;
  opacity: 0.5;
}

/*END: Information*/

/*drag-360*/

.profile-page .delivery .memo-delivery{
  position: relative;
  top: -250px;
}

.profile-page .drag-360-profile {
  position: relative;
  min-height: 600px;
}

.profile-page .drag-360-profile .drag-content .threesixty {
  min-height: 600px;
  overflow: unset;
}

.profile-page .drag-360-profile .drag-content {
  position: relative;
}

.profile-page .drag-360-profile .drag-content img {
  cursor: move;
  width: 125%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.profile-page .drag-360-profile .content-txt {
  z-index: 1;
}

.profile-page .drag-360-profile .drag-content .content-txt-360 .img-360 {
  height: 20px;
  width: auto;
  padding: 0;
  margin: 0;
}

.profile-page .drag-360-profile .drag-content .content-txt-360 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 5px;
  z-index: 1;
}

.profile-page .drag-360-profile .drag-content {
  margin-top: 0;
  margin-bottom: 0;
  z-index: 0;
}

.profile-page .drag-360-profile .drag-content img {
  z-index: 0;
}

.profile-page .drag-360-profile .threesixty .spinner {
  top: calc(50% - 15px);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.profile-page .delivery .box-delivery {
  padding: 30px;
}

.profile-page .delivery .date-time {
  display: table;
  width: 100%;
}

.profile-page .delivery .box-delivery {
  background: #000000;
  color: #ffffff;
  border-radius: 5.2px;
}

.profile-page .delivery .box-delivery input {
  color: #ffffff !important;
}

.profile-page .delivery .date-time .cus-row {
  display: table-row;
}

.profile-page .delivery .date-time .cus-cell.title {
  font-size: 18px;
  padding-right: 15px;
}

.profile-page .delivery .date-time .cus-cell {
  display: table-cell;
  vertical-align: middle;
}

/**/
.profile-modal-content,
.profile-modal-content div {
  text-align: center;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
}

.profile-modal-content .content {
  background: #ffffff !important;
  display: block;
  overflow: auto;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  width: 350px;
  border: 1px solid #ff0000;
  position: relative;
}

.profile-modal-content .content i {
  font-size: 48px;
  color: #ff0000;
}

.profile-modal-content .ic-close {
  font-size: 24px !important;
  opacity: 0.5;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #303030 !important;
}

.profile-modal-content .ic-close:hover {
  opacity: 1;
}

/****/
.profile-page .vehicle .div-control .control {
  cursor: pointer;
  opacity: 0.5;
}

.profile-page .vehicle .div-control .control.active {
  opacity: 1;
}

.profile-page .vehicle .box-info {
  padding: 20px;
  margin-top: 30px;
  background: #000000;
  color: #ffffff;
}

.profile-page .vehicle .box-info .row {
  margin-top: 20px;
  display: block;
  width: 100%;
}

/***/

.profile-page .loan .box-info {
  padding: 20px;
  background: #ff0000;
  color: #ffffff;
}

.profile-page .loan .box-info .row {
  margin-top: 20px;
  display: block;
  width: 100%;
}

/*****/

.profile-page .coe-bidding .bidding .information {
  height: auto;
  min-height: unset;
  padding-top: 120px;
}

.profile-page .coe-bidding .bidded .information {
  height: auto;
  min-height: unset;
  padding-top: 120px;
}

.profile-page .coe-bidding .box-info {
  padding: 20px;
  background: #ff0000;
  color: #ffffff;
}

.profile-page .coe-bidding .box-info .row {
  margin-top: 20px;
  display: block;
  width: 100%;
}

.profile-page .coe-bidding .sync-icon {
  margin-left: 10px;
  color: #ffffff;
  cursor: pointer;
}

.profile-page .coe-bidding .block-build  {
  position: relative;
  top: 0;
}

/*--coe-bidding---*/
.profile-page .coe-bidding .bidding .information .box {
  border-radius: 5.2px;
}

.profile-page .coe-bidding .bidding .box.coe-status .box-header {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidding .box.coe-status {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: black;
}

.profile-page .coe-bidding .bidding .box.last-coe-bidding {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: black;
}

.profile-page .coe-bidding .bidding .box.last-coe-bidding .box-header,
.profile-page .coe-bidding .bidding .box.last-coe-bidding .box-body {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidding .box.remaining-bids {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: #D0021B;
  border: solid 2px #D0021B;
}

.profile-page .coe-bidding .bidding .box.remaining-bids .box-header,
.profile-page .coe-bidding .bidding .box.remaining-bids .box-body {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidding .information .box.box-coe-bidding-detail {
  position: relative;
  top: 0;
  background-color: black;
}

.profile-page .coe-bidding .bidding .information .box.box-coe-bidding-detail .box-header,
.profile-page .coe-bidding .bidding .information .box.box-coe-bidding-detail .box-body {
  background-color: black;
  color: #FFFFFF;
}

/*--coe-bidded---*/
.profile-page .coe-bidding .bidded .information .box {
  border-radius: 5.2px;
  border: 1px solid transparent;
}

.profile-page .coe-bidding .bidded .box.coe-status .box-header {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidded .box.coe-status {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: black;
}

.profile-page .coe-bidding .bidded .box.coe-number {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: #D0021B;
}

.profile-page .coe-bidding .bidded .box.coe-number .box-header,
.profile-page .coe-bidding .bidded .box.coe-number .box-body {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidded .box.coe-bidded-amount {
  position: relative;
  height: 200px;
  min-height: 150px;
  background-color: #D0021B;
}

.profile-page .coe-bidding .bidded .box.coe-bidded-amount .box-header,
.profile-page .coe-bidding .bidded .box.coe-bidded-amount .box-body {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .coe-bidding .bidded .information .box.box-coe-bidding-detail {
  position: relative;
  top: 0;
  background-color: #D0021B;
}

.profile-page .coe-bidding .bidded .information .box.box-coe-bidding-detail .box-header,
.profile-page .coe-bidding .bidded .information .box.box-coe-bidding-detail .box-body {
  background-color: #D0021B;
  color: #FFFFFF;
}

/*****/
.profile-page .insurance .box-info {
  padding: 20px;
  background: #ff0000;
  color: #ffffff;
}

.profile-page .insurance .box-info .row {
  margin-top: 20px;
  display: block;
  width: 100%;
}

.profile-page button:disabled {
  cursor: not-allowed;
}

.profile-page .coe-bidding input[type=text]:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

/**---Customer---*/

.profile-page .block-build {
  position: relative;
  top: -200px;
  padding: 15px 30px;
  margin: 0 auto;
  background: #ff0000;
  color: #ffffff;
}

/*--PROFILE--*/
.profile-page .information .box {
  border: solid 2px black;
  border-radius: 5px;
  vertical-align: bottom;
}

.profile-page .information .box .box-header {
  background: #ffffff;
  color: black;
  border-bottom: unset;
  text-align: center;
  font-weight: bold;
}

.profile-page .information .box .box-body {
  color: #D0021B;
  text-transform: uppercase;
  line-height: 1.5em;
  word-break: break-word;
}

/*----*/

/*--VEHICLE--*/
.profile-page .vehicle .information-content .box {
  background-color: black;
  border: solid 2px white;
  border-radius: 5px;
  vertical-align: bottom;
}

.profile-page .vehicle .box.current-status .box-header {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .vehicle .box.current-status {
  position: relative;
  height: 200px;
  min-height: 150px;
  border: solid 2px red;
  background-color: black;
}

.profile-page .vehicle .box.sales-agreement .box-header {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .vehicle .box.sales-agreement {
  position: relative;
  height: 200px;
  min-height: 150px;
  border: solid 2px #D0021B;
  background-color: #D0021B;
}

.profile-page .vehicle .box.box-1 {
  position: relative;
  height: 200px;
  min-height: 150px;
  border: solid 2px white;
  background-color: white;
}

.profile-page .vehicle .box.box-2 {
  position: relative;
  height: auto;
  min-height: 300px;
  border: solid 2px white;
  background-color: white;
}

.profile-page .vehicle .box.box-3 {
  position: relative;
  height: 400px;
  min-height: 350px;
  border: solid 2px white;
  background-color: white;
}

.profile-page .vehicle .box .box-header {
  background-color: #ffffff;
  color: black;
  border-bottom: unset;
  text-align: center;
  font-weight: bold;
}

.profile-page .vehicle .box .box-body {
  color: #D0021B;
  text-transform: unset;
  width: 100%;
  font-size: 18px;
}

.profile-page .vehicle .box .box-body.bottom {
  position: absolute;
  bottom: 0;
}

.profile-page .vehicle .internal img {
  width: 125%;
  height: auto;
  object-fit: cover;
  position: relative;
  margin-top: 75px;
  margin-bottom: 75px;
}

/*--START loan--*/

.profile-page .loan .information {
  height: auto;
  min-height: unset;
  padding-top: 120px;
}

.profile-page .loan .box.box-black {
  position: relative;
  height: auto;
  min-height: 150px;
  background-color: black;
}

.profile-page .loan .box.box-black .box-header {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .loan .box.box-black .box-body {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .loan .box.box-red {
  position: relative;
  height: auto;
  min-height: 150px;
  border: solid 2px #D0021B;
  background-color: #D0021B;
}

.profile-page .loan .box.box-red .box-header {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .btn-print {
  width: 35%;
}

.profile-page .loan .information .applying-hire-purchase-new {
  position: relative;
  top: 0;
  border: hidden;
}

.profile-page .loan .information .applying-hire-purchase-approved {
  position: relative;
  top: 0;
  border: hidden;
}

.profile-page .loan .information .applying-hire-purchase-approved .box-body {
  color: #FFFFFF;
}

.profile-page .loan .information .purchase-information {
  position: relative;
  top: 0;
  border-radius: 5.2px;
  border: 2px solid #ff0000;
}

.profile-page .loan .information .purchase-information .box-header {
  color: #c0c0c0 !important;
}

.profile-page .loan .information .purchase-information .box-header .active {
  color: #ff0000;
}

.profile-page .loan .information .guarantor {
  position: relative;
  top: 50px;
  border-radius: 5.2px;
  border: 2px solid #ff0000;
  z-index: 99;
}

.profile-page .loan .information .guarantor .box-header {
  color: #c0c0c0 !important;
}

.profile-page .loan .information .guarantor .box-header .active {
  color: #ff0000;
}

.profile-page .loan .block-build {
  position: relative;
  top: 0;
}

/*--END loan--*/

/*--START insurance--*/
.profile-page .insurance .box.box-black {
  position: relative;
  height: auto;
  min-height: 150px;
  background-color: black;
}

.profile-page .insurance .information {
  min-height: auto;
  padding-top: 120px;
}

.profile-page .insurance .box.box-black .box-header {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .insurance .box.box-black .box-body {
  background-color: black;
  color: #FFFFFF;
}

.profile-page .insurance .box.box-red {
  position: relative;
  height: auto;
  min-height: 150px;
  border: solid 2px #D0021B;
  background-color: #D0021B;
}

.profile-page .insurance .box.box-red .box-header {
  background-color: #D0021B;
  color: #FFFFFF;
}

.profile-page .btn-print {
  width: 35%;
}

.profile-page .insurance .information .insurance-quotes-pending {
  position: relative;
  top: 0;
  border: hidden;
}

.profile-page .insurance .information .insurance-quotes-insured {
  position: relative;
  border: hidden;
  margin-top: 15px;
}

.profile-page .insurance .information .insurance-quotes-insured .box-body {
  color: #FFFFFF;
}

.profile-page .insurance .information .purchase-information {
  position: relative;
  top: 0;
  border-radius: 5.2px;
  border: 2px solid #ff0000;
}

.profile-page .insurance .information .purchase-information .box-header {
  color: #c0c0c0 !important;
}

.profile-page .insurance .information .purchase-information .box-header .active {
  color: #ff0000;
}

.profile-page .insurance .information .guarantor {
  position: relative;
  top: 50px;
  border-radius: 5.2px;
  border: 2px solid #ff0000;
  z-index: 1;
}

.profile-page .insurance .information .guarantor .box-header {
  color: #c0c0c0 !important;
}

.profile-page .insurance .information .guarantor .box-header .active {
  color: #ff0000;
}

.profile-page .insurance .block-build {
  position: relative;
  top: 0;
}

/*--END insurance--*/

.profile-page .delivery .information {
  min-height: 768px;
  padding-top: 120px;
}

.profile-page .btn-upload {
  background-color: #B0B0B0;
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 1px;
  border: unset;
  border-color: unset;
  padding: 15px 5px 15px 10px;
}

.profile-page .btn-upload.right {
  border-right: 2px solid #FFFFFF;
}

.profile-page .btn-upload:hover {
  background-color: #D0021B;
}

.typist {
  position: absolute;
  top: 150px;
}

.typist a {
  color: inherit;
}

.typist .a:hover {
  background-color: #0b0b0b;
  color: white;
  text-decoration: none;
}

.typist .typist-header {
  font-size: 2em;
  cursor: pointer;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  max-width: 700px;
}

.typist .typist-message {
  color: #ff1c1a;
  width: 400px;
  margin: auto;
}

.typist .typist-message .flash {
  color: #ff0000;
  font-weight: bold;
  text-decoration: underline;

  animation-name: blinker;
  animation-duration: 0.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/*customer*/
.typist-c {
  position: absolute;
  top: 150px;
}

.typist-c a {
  color: inherit;
}

.typist-c .a:hover {
  background-color: #0b0b0b;
  color: white;
  text-decoration: none;
}

.typist-c .typist-c-header {
  font-size: 2em;
  cursor: pointer;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  max-width: 700px;
}

.typist-c .typist-message {
  color: #ff1c1a;
  width: 400px;
  margin: auto;
}

.typist-c .typist-message .flash {
  color: #ff0000;
  font-weight: bold;
  text-decoration: underline;

  animation-name: blinker;
  animation-duration: 0.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}