/* View port is only setup for max-width less than 640, please refer to responsivenessCtrl.ascx 
    Tablets are still using viewport to zoom the whole website
*/
/* CSS for mobile devices */
@media only screen and (max-width: 641px) {
  #headercontent,
  #menu,
  #main,
  #sliderSection,
  #content,
  #topbarcontent,
  #footer {
    width: 100%;
    min-width: inherit;
    max-width: inherit;
  }
  #headerwrap #headerLoggedInPanel #currentDetails {
    text-align: initial;
  }
  #headerwrap #headerLoggedInPanel #currentDetails #currentAgentName,
  #headerwrap #headerLoggedInPanel #currentDetails #currentBookingName {
    display: flex;
  }
  #headerwrap #branding,
  #headerwrap #headerlinks {
    float: inherit;
  }
  #headerwrap #headerlinks {
    margin: 10px 0;
    padding: 5px;
    padding-bottom: 55px;
  }
  #headerwrap #currentDetails_firstline {
    display: block;
  }
  #headerwrap #headerLoggedInPanel {
    padding: 10px;
    float: inherit;
  }
  #headerwrap #headerLoggedInPanel #currentDetails {
    float: inherit;
    padding: 0;
    margin-top: 20px;
    margin-bottom: -55px;
  }
  #headerwrap #headerLoggedInPanel #currentDetailsLabels {
    width: 100%;
  }
  #headerwrap #headerLoginPanel #tPassword,
  #headerwrap #headerLoginPanel #tUsername {
    width: 100%;
  }
  #headerwrap #headerLoginPanel #headerlinks {
    padding: 10px;
    width: 100%;
  }
  #headerwrap #headerLoginPanel #btnLogin {
    float: right;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  #topbar {
    height: auto;
    width: 100%;
  }
  #topbar #menu a.menuHeader {
    display: none;
  }
  #topbar #menu ul ul {
    display: inherit;
    position: unset;
  }
  #topbar #menu li ul li {
    border-top: inherit;
  }
  #topbar #menu > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
  }
  #topbar #menu > ul > li {
    display: block;
    height: auto;
    width: 47%;
  }
  #topbar #menu > ul > li a {
    padding: 5px;
  }
  #main #loginPanel {
    margin: 0;
  }
  #main #content {
    padding: 0;
  }
  #main #content > form {
    min-width: inherit;
    max-width: inherit;
    margin: 0 20px;
    padding: 20px 0;
  }
  #main #postlogin .advertContainer {
    min-width: inherit;
    max-width: inherit;
  }
  #main #postlogin .advertContainer .advertItem {
    display: block;
    width: 100%;
    max-width: inherit;
    text-align: center;
  }
  #searchrefine {
    /* Need markup or javascript changes for these */
  }
  #searchrefine #divResultsHeader #searchActionsTop {
    float: inherit;
  }
  #searchrefine #SearchRefineFilter {
    width: 100%;
  }
  #searchrefine .SearchRefineFilter_filterSection {
    width: 100%;
  }
  #searchrefine .SearchRefineFilter_heading {
    width: auto;
  }
  #searchrefine .supplierAmenities ul li {
    width: 100%;
  }
  #searchrefine #SearchRefineFilter_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #searchrefine #searchRefineResults.searchRefineNarrowLayout,
  #searchrefine #pageSelectTop.searchRefineNarrowLayout,
  #searchrefine #pageSelectBottom.searchRefineNarrowLayout {
    min-width: inherit;
    max-width: inherit;
  }
  #searchrefine #searchRefineResults #searchResults .supplierNote,
  #searchrefine #searchRefineResults #searchResults .supplierHeader,
  #searchrefine #searchRefineResults #searchResults .supplierNoteLink {
    width: 100%;
  }
  #searchrefine #searchResults .class {
    position: initial;
  }
  #searchrefine table.optionList {
    table-layout: fixed;
  }
  #searchrefine .optionList > tr:first-child {
    display: none;
  }
  #searchrefine #searchResults .resultItem table.resultList {
    display: block;
    width: 88%;
    background-color: aliceblue;
    padding: 0 8% 0 4%;
    margin: 0;
  }
  #searchrefine #searchResults .resultItem table.resultList tr,
  #searchrefine #searchResults .resultItem table.resultList td,
  #searchrefine #searchResults .resultItem table.resultList span {
    display: block;
    width: 100%;
  }
  #searchrefine #searchResults .resultItem table.resultList .rateicon {
    width: 25%;
  }
  #searchrefine .resultList.action {
    border-bottom-width: initial !important;
    padding-top: 5px;
    padding-bottom: 15px;
  }
  #searchrefine .optionFilter {
    border-bottom: initial;
  }
  #ucSearchRefine label {
    width: 100%;
  }
  #ucSearchRefine #ucSearchRefine_searchAllSection label {
    width: 90%;
  }
  #ucSearchRefine #ucSearchRefine_minAvailabilitySection label:nth-child(3),
  #ucSearchRefine #ucSearchRefine_minAvailabilitySection label:nth-child(5) {
    width: 90%;
  }
  #divSearch .searchConsole #ucSearchRefine #ucSearchRefine_serviceGroupSection,
  #divSearch .searchConsole #ucSearchRefine #ucSearchRefine_locationGroupSection,
  #divSearch .searchConsole #ucSearchRefine_fromDateSection,
  #divSearch .searchConsole #ucSearchRefine_toDateSection,
  #divSearch .searchConsole #ucSearchRefine_scuSection {
    width: 100%;
  }
  #divSearch .searchConsole div [class^=tp-room-row-] {
    flex-wrap: wrap;
  }
  #divSearch .searchConsole div [class=room-button] {
    padding: 0;
  }
  #accounts table#balances,
  #accounts table#bookings {
    overflow: scroll;
    display: block;
    width: 100%;
  }
  #accounts tr#trTravel td {
    display: block;
    width: 100%;
  }
  #availabilitysearch #ucSearch_serviceGroupSection,
  #productsearch #ucSearch_serviceGroupSection,
  #medialibrary #ucSearch_serviceGroupSection,
  #producttariff #ucSearch_serviceGroupSection,
  #availabilitysearch #ucSearch_locationGroupSection,
  #productsearch #ucSearch_locationGroupSection,
  #medialibrary #ucSearch_locationGroupSection,
  #producttariff #ucSearch_locationGroupSection {
    width: 100%;
  }
  #availabilitysearch div#ucSearch_sortSection > label,
  #productsearch div#ucSearch_sortSection > label,
  #medialibrary div#ucSearch_sortSection > label,
  #producttariff div#ucSearch_sortSection > label {
    width: 100%;
  }
  #availabilitysearch #ucSearch_toDateSection,
  #productsearch #ucSearch_toDateSection,
  #medialibrary #ucSearch_toDateSection,
  #producttariff #ucSearch_toDateSection {
    padding-left: 0;
  }
  #availabilitysearch #ucSearch_fromDateSection,
  #productsearch #ucSearch_fromDateSection,
  #medialibrary #ucSearch_fromDateSection,
  #producttariff #ucSearch_fromDateSection,
  #availabilitysearch #ucSearch_toDateSection,
  #productsearch #ucSearch_toDateSection,
  #medialibrary #ucSearch_toDateSection,
  #producttariff #ucSearch_toDateSection,
  #availabilitysearch #ucSearch_scuSection,
  #productsearch #ucSearch_scuSection,
  #medialibrary #ucSearch_scuSection,
  #producttariff #ucSearch_scuSection {
    width: 100%;
  }
  #producttariff .suppliers .supplier .options .option {
    overflow: auto;
  }
  #producttariff .tariffHeader {
    min-width: inherit;
  }
  #producttariff #tariffbutton,
  #producttariff #expandAll,
  #producttariff #selectAll {
    height: inherit;
  }
  #producttariff .groupheader .suppliername {
    width: 95%;
    padding-left: 5%;
    display: block;
  }
  #tpDiscountPopup .ui-dialog {
    width: 100%;
    left: 0;
  }
  #shoppingcart #shoppingCart_SaveButton .h4Label,
  #viewbooking #shoppingCart_SaveButton .h4Label {
    padding-left: 0;
  }
  #shoppingcart #shoppingCart_SaveButton .iButton,
  #viewbooking #shoppingCart_SaveButton .iButton {
    margin-left: 0;
    float: right;
  }
  #shoppingcart table.resultList,
  #viewbooking table.resultList {
    overflow: scroll;
    display: block;
  }
  #shoppingcart table.resultList th.w10,
  #viewbooking table.resultList th.w10 {
    min-width: 50px;
  }
  #shoppingcart table.resultList th.w40,
  #viewbooking table.resultList th.w40 {
    min-width: 100px;
  }
  #shoppingcart .bookingActionButtonItem,
  #viewbooking .bookingActionButtonItem {
    width: initial;
  }
  #shoppingcart a.buttonaction,
  #viewbooking a.buttonaction,
  #shoppingcart a.buttonaction:link,
  #viewbooking a.buttonaction:link,
  #shoppingcart a.buttonaction:visited,
  #viewbooking a.buttonaction:visited,
  #shoppingcart a.buttonaction:active,
  #viewbooking a.buttonaction:active {
    padding: 7px 7px;
  }
  #listbooking select,
  #shoppingcart select,
  #viewbooking select,
  #paymentstart select,
  #paymentcheckout select,
  #listbooking input[type=text],
  #shoppingcart input[type=text],
  #viewbooking input[type=text],
  #paymentstart input[type=text],
  #paymentcheckout input[type=text],
  #listbooking input[type=email],
  #shoppingcart input[type=email],
  #viewbooking input[type=email],
  #paymentstart input[type=email],
  #paymentcheckout input[type=email],
  #listbooking input[type=password],
  #shoppingcart input[type=password],
  #viewbooking input[type=password],
  #paymentstart input[type=password],
  #paymentcheckout input[type=password],
  #listbooking input[type=search],
  #shoppingcart input[type=search],
  #viewbooking input[type=search],
  #paymentstart input[type=search],
  #paymentcheckout input[type=search] {
    min-width: initial;
    width: 100%;
  }
  #listbookings table.tableborder > tbody > tr {
    display: flex;
    flex-direction: column;
  }
  #listbookings table.tableborder > tbody > tr > td {
    padding: 0 10px;
  }
  #listbookings table.resultList {
    overflow: scroll;
    display: block;
  }
  #paymentcheckout td.paymentStartColumn1 {
    width: 40%;
    min-width: 100px;
  }
  #paymentstart td.paymentStartColumn1 {
    width: 40%;
  }
  #addservice {
    /* Need markup or javascript changes for these */
  }
  #addservice #ucAmendServiceDateSection_fromDateSection,
  #addservice #ucAmendServiceDateSection_toDateSection,
  #addservice #ucAmendServiceDateSection_scuSection {
    width: 100%;
  }
  #addservice #ucAmendServiceDateSection_fromDateSection label,
  #addservice #ucAmendServiceDateSection_toDateSection label,
  #addservice #ucAmendServiceDateSection_scuSection label {
    width: 100%;
  }
  #addservice #addService_headerDetails {
    display: block;
  }
  #addservice button#searchAgainButtonTop,
  #addservice button#searchAgainButton {
    float: none;
  }
  #addservice #addService_fromDateSection .addService_ChangeSearch,
  #addservice .extraPricingLink {
    display: none;
  }
  #addservice .dataColumn input {
    width: 100%;
    min-width: initial;
  }
  #addservice #optionDetailsSection .labelColumn,
  #addservice #addServiceBookingDetails .labelColumn,
  #addservice #addServiceBookingExtra .labelColumn,
  #addservice #expandStartBookingArrangement .labelColumn,
  #addservice #passsengerDetailsSection .labelColumn,
  #addservice #editQuoteBookingDetails .labelColumn,
  #addservice .editQuoteBookingExtra .labelColumn,
  #addservice .editQuoteBookingArrangement .labelColumn {
    width: 20%;
    min-width: 30%;
  }
  #addservice #optionDetailsSection .fyistyle .labelColumn {
    display: block;
    width: 100%;
  }
  #addservice .paxButton {
    padding: 2% 3%;
    width: 94%;
  }
  #addservice #paxnumDiv {
    width: 100%;
  }
  #addservice #paxLimitsDiv > span {
    width: 100%;
    display: block;
  }
  #addservice #addService_PaxAgePolicy {
    width: 100%;
    height: auto;
  }
  #addservice #addService_PaxAgePolicy .labelColumn {
    width: 100%;
  }
  #addservice #deleteRoom {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  #addservice .ui-dialog #paxDialogPanel #nextButtonDiv {
    width: 100%;
    float: none !important;
  }
  #addservice .ui-dialog #paxDialogPanel .paxRow input[type="text"] {
    width: 65%;
    min-width: initial;
  }
  .ui-dialog {
    width: 90% !important;
    left: 0 !important;
    padding: 5% !important;
  }
  #optioninfo #pagewrap,
  #supplierinfo #pagewrap {
    width: 100%;
  }
  #optioninfo #main #content > form,
  #supplierinfo #main #content > form {
    margin: 0;
  }
  #optioninfo #rateSearch > tbody > tr,
  #supplierinfo #rateSearch > tbody > tr {
    display: grid;
  }
  #optioninfo #rateSearch .content,
  #supplierinfo #rateSearch .content {
    width: 96%;
  }
  #optioninfo #searchParametersPanel,
  #supplierinfo #searchParametersPanel {
    width: 100%;
  }
  #optioninfo #optrates,
  #supplierinfo #optrates {
    overflow: scroll;
    width: 100%;
  }
  #optioninfo #optionInfo_roomSection,
  #supplierinfo #optionInfo_roomSection {
    padding-bottom: 15px;
  }
  #optioninfo #optionInfo_roomSection div[class^=tp-room-row-],
  #supplierinfo #optionInfo_roomSection div[class^=tp-room-row-] {
    flex-wrap: wrap;
  }
  #optioninfo #optionInfo_roomSection div[class=room-button],
  #supplierinfo #optionInfo_roomSection div[class=room-button] {
    padding-top: 0;
    padding-left: 180px;
  }
  #optioninfo #optionInfo_roomSection div [class=room-label],
  #supplierinfo #optionInfo_roomSection div [class=room-label] {
    padding-top: 5px;
  }
  #optioninfo #productContent .mainblock,
  #supplierinfo #productContent .mainblock,
  #optioninfo #supplierContent .mainblock,
  #supplierinfo #supplierContent .mainblock,
  #optioninfo #productContent_pdf .mainblock,
  #supplierinfo #productContent_pdf .mainblock,
  #optioninfo #supplierContent_pdf .mainblock,
  #supplierinfo #supplierContent_pdf .mainblock {
    width: 100%;
  }
  #optioninfo #productContent .sideblock,
  #supplierinfo #productContent .sideblock,
  #optioninfo #supplierContent .sideblock,
  #supplierinfo #supplierContent .sideblock,
  #optioninfo #productContent_pdf .sideblock,
  #supplierinfo #productContent_pdf .sideblock,
  #optioninfo #supplierContent_pdf .sideblock,
  #supplierinfo #supplierContent_pdf .sideblock {
    width: 100%;
  }
  #optioninfo ul#tabNavigation,
  #supplierinfo ul#tabNavigation {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    margin-bottom: -5px;
  }
  #optioninfo ul#tabNavigation li,
  #supplierinfo ul#tabNavigation li {
    height: 44px;
  }
  #optioninfo ul#tabNavigation li a,
  #supplierinfo ul#tabNavigation li a {
    border: 1px solid #ccc;
    background-color: #FFFFFF;
  }
  #optioninfo ul#tabNavigation li a.selected,
  #supplierinfo ul#tabNavigation li a.selected {
    border-top: 5px solid #3d82ab;
    color: #666666;
  }
  #medialibrary #divSearch {
    /* Need markup or javascript changes for these */
    overflow: scroll;
  }
  #editsublogin #divAdd table {
    table-layout: fixed;
  }
  #editsublogin #divAdd input {
    width: 100%;
  }
  #paymentstart #paymentGatewayManual table {
    min-width: 600px;
  }
  #paymentstart #paymentGatewayManual > .tp-group:nth-child(4) {
    overflow: scroll;
  }
  #paymentstart #paymentGatewayManual > .tp-group > div.tp-text-align-right {
    position: absolute;
  }
  #paymentstart #paymentGatewayManual > div.tp-text-align-right {
    margin-top: 50px;
  }
  html #pagefooter {
    width: 100%;
  }
  html #pagefooter .right,
  html #pagefooter .left {
    margin-top: 10px;
    text-align: left;
    width: 90%;
    padding: 5%;
  }
  html #pagefooter .right .copytext,
  html #pagefooter .left .copytext {
    margin-top: 0 !important;
  }
  html #pagefooter #footer {
    padding: 0;
  }
  #ucSearch_searchAllSection {
    padding: 0;
  }
  .pagewidth {
    min-width: inherit;
    max-width: inherit;
  }
  .col2-1,
  .col2-2 {
    margin-left: 0;
    width: 100%;
  }
  button#searchAgainButtonTop,
  button#searchAgainButton {
    float: left;
  }
  div.blockMsg {
    width: 80%;
    left: 10%;
  }
  .blockMessageImage {
    height: 50px;
    background-position: center;
    background-repeat: inherit;
  }
}
/* extra css for all even smaller device */
@media only screen and (max-width: 376px) {
  #optioninfo #rateSearch,
  #supplierinfo #rateSearch,
  #optioninfo #rateSearch tbody,
  #supplierinfo #rateSearch tbody {
    display: block;
    width: 100%;
  }
  #optioninfo #rateSearch .content,
  #supplierinfo #rateSearch .content,
  #optioninfo #rateSearch tbody .content,
  #supplierinfo #rateSearch tbody .content {
    width: 80%;
    display: block;
  }
  #optioninfo #rateSearch .content table,
  #supplierinfo #rateSearch .content table,
  #optioninfo #rateSearch tbody .content table,
  #supplierinfo #rateSearch tbody .content table {
    display: block;
    width: 100%;
  }
  #optioninfo #rateSearch .content table tbody,
  #supplierinfo #rateSearch .content table tbody,
  #optioninfo #rateSearch tbody .content table tbody,
  #supplierinfo #rateSearch tbody .content table tbody,
  #optioninfo #rateSearch .content table tbody tr,
  #supplierinfo #rateSearch .content table tbody tr,
  #optioninfo #rateSearch tbody .content table tbody tr,
  #supplierinfo #rateSearch tbody .content table tbody tr,
  #optioninfo #rateSearch .content table tbody tr td,
  #supplierinfo #rateSearch .content table tbody tr td,
  #optioninfo #rateSearch tbody .content table tbody tr td,
  #supplierinfo #rateSearch tbody .content table tbody tr td {
    display: block;
    width: 100%;
  }
  #optioninfo #searchParametersPanel #dateSelect,
  #supplierinfo #searchParametersPanel #dateSelect {
    margin-bottom: 10px;
  }
  #optioninfo #searchParametersPanel #dateSelect label,
  #supplierinfo #searchParametersPanel #dateSelect label {
    width: 100%;
  }
  #optioninfo #searchParametersPanel #optionInfo_paxSection div[class^=tp-room-row-],
  #supplierinfo #searchParametersPanel #optionInfo_paxSection div[class^=tp-room-row-] {
    flex-wrap: wrap;
  }
  #optioninfo #productContentResults #mapDiv,
  #supplierinfo #productContentResults #mapDiv {
    width: 100% !important;
  }
}