///////////////
// This file is for component styles
// For page styles, please refer to customize/styles.less
///////////////

.tc-full-width-ellipsis {
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}

.tc-dim-no-scroll-bars.ant-layout {
  filter: brightness(75%);
  // transition: 0.5s filter linear;
  // width: 100vw;
  // height: 100vh;
  // overflow: hidden;
  // padding-right: 15px;
}

// https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
input.tc-inc-dec-input {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  text-align: center;
}

.tc-left-addon-primary .ant-input-wrapper .ant-input-group-addon:nth-child(1) {
  // not sure how to include .ant-btn-primary()
  color: #fff;
  background-color: @primary-color;
  border-color: @primary-color;
}

.tc-right-addon-primary .ant-input-wrapper .ant-input-group-addon:nth-child(3) {
  // not sure how to include .ant-btn-primary()
  color: #fff;
  background-color: @primary-color;
  border-color: @primary-color;
}

.tc-tour-form {
  height: 100%;
  display: flex;
  flex-direction: column;

  .ant-fullcalendar table {
    height: auto;
  }

  .tc-blur-hide-inputs {
    opacity: 0.7;
    pointer-events: none;
    filter: blur(1px);

    .ant-form-item {
      opacity: 0;
    }
  }

  .tour-calendar.ant-fullcalendar-fullscreen {
    height: 495px;
    .ant-fullcalendar-calendar-body {
      padding: 0;
    }
    .ant-fullcalendar-date {
      height: 85px;
    }
    .ant-fullcalendar-content {
      text-align: center;
      font-size: 12px;
    }
  }

  .tc-room-form {
    max-width: 350px;
    margin: auto;
    .ant-form-item {
      margin-bottom: 8px
    }
  }

  .tc-steps-clickable .ant-steps .ant-steps-item {
    .ant-steps-item-content, .ant-steps-item-icon {
      cursor: pointer;
    }
  }

  .ant-fullcalendar-fullscreen {
    .month-divider {
      color: #000;
      font-size: 18px;
      background: #eee;
      padding: 8px;
      text-align: center;
    }
  }
}

.tc-invoice {
  line-height: 1.5em;

  .list_label {
    font-weight: bold;
    width: 100px;
  }

  td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .block-header {
      font-weight: bold;
      text-decoration: underline;
      margin-top: 2em;
  }
  .invoice_table_style{
      text-align:right;
      width:100%;
      border-collapse: collapse;
      margin-top: 2em;
      td {
          white-space: pre;
      }
  }
  .invoice_table_style .col1{
      width:auto;
      text-align:left;
  }
  .invoice_table_style .item_name {
      font-size: 1.5em;
      line-height: 1.5em;
  }
  .invoice_table_style .header td{
      padding-top: 0.5em;
      border: 0px;
      border-bottom: 1px solid #000;
      border-top: 2px solid #000;
  }
  .invoice_table_style .subheader td{
      font-weight:bold;
      padding-top: 0.5em;
      color: rgba(0, 0, 0, 0.87);
  }
  .invoice_table_style .dateheader td{
    padding-top: 0.5em;
    color: rgba(0, 0, 0, 0.87);
  }
  .total {
      text-align: right;
      width: 30%;
      border-top: 1px solid #000;
      margin-top: 1em;
      padding-bottom: 5px;
      float: right;
      .amount {
        padding-top: 5px;
        width: 100px;
        display: inline-block
      }
  }
}

.tc-clearfix::after {
  content: "";
  clear: both;
  display: table;
}

// search result
.globaltix-search-form {
  padding: 10px 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f9f4f4;
  input,
  select,
  .ant-select-selection {
    border-radius: 0px;
    padding: 7px 12px;
    height: auto;
    font-size: 16px;
    line-height: normal;
  }
  input {
    padding: 10px 12px;
  }
  .deal-submit {
    padding: 10px;
    line-height: normal;
    height: auto;
    font-size: 17px;
    text-align: center;
    min-width: 140px;
    border-radius: 0px;
    transition: all ease-in-out 0.2s;
    &:hover {
      background: #9c0a0a;
      border-color: #9c0a0a;
    }
  }
}
.search-result {
  .ant-collapse {
    border-radius: 0;
    margin: 0 0 20px 0;
    border: 1 px solid #ddd;
  }
}

.tickets-details {
  padding: 10px;
  margin: 15px;
  background: #fbfbfb;
  position: relative;
  p {
    margin: 0;
  }
  .ticketInfo-sec {
    width: 14px;
    height: 19px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 15px;
    color: #af0201;
    cursor: pointer;
  }
  .list-star1 {
    color: #af0201;
  }
  .ticket-name,
  .ticket-price {
    strong {
      color: #af0201;
      font-weight: 600;
    }
  }
}
.tickets-details-terms {
  background: #fbfbfb;
}

.main-collaspe-relative {
  position: relative;
  .attractionInfo {
    position: absolute;
    top: 16px;
    right: 15px;
  }
}

.globaltix-result {
  .ant-collapse {
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 20px 0;
    .ant-collapse-header {
      line-height: normal;
      padding: 6px 0 6px 15px;
      position: relative;
      .anticon.anticon-right.arrow {
        position: absolute !important;
        right: 45px;
        left: initial !important;
        width: 14px;
        height: 14px;
        line-height: 0;
        text-align: center;
        transform: rotate(87deg) !important;
        top: 46%;
      }
    }
    .ant-collapse-header[aria-expanded="true"] {
      .list-star {
        color: #af0201;
        svg {
          color: #af0201;
        }
      }
      .anticon.anticon-right.arrow {
        transform: rotate(-88deg) !important;
      }
    }
  }
  .ant-collapse-item {
    border-radius: 0;
    border-bottom: 1px solid rgba(220, 217, 217, 0.1);
    box-shadow: 0px 2px 5px rgba(150, 146, 146, 0.15);
    .ant-collapse-content {
      border: none;
    }
    .ant-collapse-content-box {
      padding: 0 !important;
    }
  }
  .ant-collapse-header i {
    color: #af0201;
  }
  .header-list1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    img {
      width: 60px;
      height: 60px;
      display: inline-block;
      border-radius: 50%;
      margin: 0 30px;
    }
    span {
      font-size: 16px;
      display: inline-block;
      font-weight: 400;
      color: #af0201;
      vertical-align: middle;
    }
    .attractionInfo {
      position: absolute;
      top: 45%;
      right: 15px;
    }
    .list-star {
      color: #000000;
      font-size: 16.5px;
    }
  }
}

.printDiv {
  display: none;
}

@media print {
  .printDiv {
    display: block;
  }
}

.tc-icon-select {
  display: flex;
  align-items: center;

  &.l2 {
    padding-left: 32px;
  }

  * {
    flex-shrink: 0;
  }

  .tc-icon {
    margin: 10px;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.maticon-airplanemode_active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAACLElEQVR4AeyYJZhWQRiFB3cqduO6z3ewHtCORdwhbi+QcGtsYxtbkB5wSTgUtOIOs2l95/ezz9znOe/p4Z077y/XiVojhBCibobtxysEBLyy/XUzXL7wi/EEYdie+MUuR0yymwgjZzfdpPyc/zaEsfPbXF7A7fEE7E5+BL6NK/A1PwJh/EmAhwQkIAEJSEACEpCABCQgAQlIQAIS6MjQFxNAX0fmkmYKDtlXhPjsix12k12adHXhIUIJe9jV5VKjda4dt38IJe6vneiYk1K06/EGocy9wfpUor2MUGSEqPnRDo4YNT9aatT8aIlR86MlRs2Plho1P1pi1PxoqVHzoyVGzY+WGDU/WnrU/Gj5UfOj5UfNj9b+4xa60YQQWRO6ccv+06MuP1r7Zdf97taFpfwnxiLbZdfwmxg1Qhn7ZL1+U938cv/U1823jXYJnxBKX60F3tsFW4Np1byVaJ1uq3EeHyZa4CmO2ko3qWavVSZhBY7Yc7bAYKSs90IDkRMERkbKEhiI3O+26/hdjUA8Ur7AYOR+k/XiUxUCkUj5AiMjX2MX8KFcgUikbIFikevlrgTISEACEpCABCQggWwWemIC6MlmubSxZnuMEJ89tmaXLtiC7whF9h1bXIpgtl1EiIx3lfhXh3+V+Fcn/auEUNkcEwn8sKv+gNVZnT9gV/EjRwL2Aqf82pGfM9ksvxan8DJlgcEzdwUYfB5pCQyeeWkMPg8nhBBC9I8KAADBIckZc/p3LQAAAABJRU5ErkJggg==);
}

.maticon-location_city {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAADFBMVEUAAAAyMjIzMzMzMzMmXYBMAAAAA3RSTlMAf3QFuRTCAAAAYUlEQVR4AWIYhoDRAYcE9wNAe2SAATAQA8Hoh/LF+1m+VXBTAYcuFMWSYQODQUKTd2hqh+SCpROgIwk6UrB1Alg6oSMJOlKgI9BzFhzMRa+vuXjhKnrn2on5xy9i/vGF4QGYoFGYFXBdcgAAAABJRU5ErkJggg==);
}

.tc-antd-option {
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  width: 100%;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
}
.hide-year-buttons {
	.ant-calendar-header {
		.ant-calendar-prev-year-btn,
		.ant-calendar-next-year-btn {
			display: none;
		}
	}
}

.tc-outbound-rooms {
  > div {
    float: left;
    margin-right: 20px;
  }
}

.seat-map {
  .seat {
    flex: 0 0 4em;
     text-align: center;
     height: 4em;
     line-height: 1em;
     border: 1px solid #999;
     margin: 0.5em;
     padding: 1em 0;
     cursor: pointer;
     background-color: #FFF;

    &.padis-FC {
      background-color: #DDF;
    }
    &.padis-L {
      background-color: #DFD;
    }
    &.padis-E {
      margin-top: 25px;
    }
    &.left-of-aisle { 
      margin-right: 50px;
    }

    &.selected {
      background-color: #FDD;
      border: 1px solid #000;
    }
    &.disabled {
      background-color: #DDD;
    }

  }
}
.pax-list {
  //background-color: #ddd;
  table {
    width: 100%;
    th, td {
      border-bottom: 1px solid #ddd;
      height: 40px;
      font-size: 1.1em;
    }

    .seat-selection {
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }

    tr.selected {
      background-color: #FFD;
      .seat-selection {
        cursor: inherit;
        color: inherit;
        text-decoration: none;
        font-weight: bold;
      }
    }
  }
}