@import "variables.css";
@import "utilities.css";

/*@import "agent/fm2a.css";*/

/************** CSS RULES **************/

/*CSS CLASSES AND ID GETTING OUT OF HAND - MULTIPLE CLASSES DOING SAME THING*/

/*THIS IS BAD PRACTICE*/

/*THERE IS A LIST OF CLASSES IN BOOTSTRAP THAT DOES WHAT YOU NEED - SEARCH DOC ONLINE, OR SCROLL THROUGH BASE CLASSES BELOW ALREADY EXISTS*/

/*IF YOU'RE NOT SURE - ASK MARGA  BEFORE CREATING NEW COMPLEX CLASS*/


/************BASE************/


/* Unset the height restrictions for multi selects so the input can grow as more choices are added */
.select2-selection.select2-selection--multiple.modelselect2multiple {
    height: unset !important;
    min-height: unset !important;
}

.select2-container {
    min-width : 10em !important;
}

.select2-results__option.select2-results__message, .select2-results__option, .select2-results__option .select2-results__option--highlighted, .select2-search__field {
    font-size : 10px !important;
}

.button-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1rem 0 0;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    gap: 0.25rem;
}

.django-ckeditor-widget {
    display : block!important;
    width   : 100%!important;
}

/* */

* {
    margin             : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    font-family        : "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
}

body,html {
    overflow-x : hidden;
    overflow-y : overlay;
    min-width  : 800px;
    background : var(--colour-offwhite);
}

[x-cloak] {
    display : none !important;
}

.htmx-indicator{
    display : none;
}
.htmx-request .htmx-indicator{
    display : inline;
}
.htmx-request.htmx-indicator{
    display : inline;
}

.spinner {
    border        : 2px solid rgba(156, 163, 175, 0.3);
    border-radius : 50%;
    border-top    : 2px solid #3b82f6;
    width         : 14px;
    height        : 14px;
    animation     : spin 1s linear infinite;
}
@keyframes spin {
    0% { transform : rotate(0deg); }
    100% { transform : rotate(360deg); }
}

td {
    font-size     : 10px;
    text-overflow : ellipsis;
    overflow      : hidden;
    max-width     : 300px;
    white-space   : nowrap;
}
.table.table-wrap td {
    white-space : nowrap !important;
}
.table.table-space-normal td,
.table.table-space-normal th{
    white-space    : normal!important;
    vertical-align : top!important;
}
.tr-light-grey th,
.tr-light-grey td{
    background-color : var(--colour-light-gray);
    padding          : 1px 5px !important;
    text-transform   : uppercase;
    font-size        : 11px;
    font-weight      : bold;
}
.tr-dark-grey th,
.tr-dark-grey td{
    background-color : var(--colour-gray);
    padding          : 1px 5px !important;
    text-transform   : uppercase;
    font-size        : 11px;
    font-weight      : bold;
}
.top-0 {
    top : 0;
}
.mt-formgroup {
    margin-top : 6px
}
.mt-formgroup2 {
    margin-top : 12px
}
.mt-formgroup-btn {
    margin-top : -6px
}
.mt-formgroup-btn2 {
    margin-top : -12px
}
.no-btn {
    background : none;
    border     : none;
}
.disabled-link {
    pointer-events : none;
    cursor         : default;
}
.border-none{
    border : none;
}

.border-success-light{
    border : 1px solid #c3e6cb!important;
}

.border-danger-light{
    border : 1px solid #f5c6cb!important;
}

.table-border, .table-border td, .table-border th{
    border : 1px solid var(--colour-base);
}
span.asteriskField {
    display : none;
}
.home h4 {
    text-transform : capitalize;
}
svg {
    height : 1rem;
    width  : 1rem;
}
ul {
    list-style : none;
    padding    : 0;
    margin     : 0;
}
a:hover {
    text-decoration : none;
}
button a {
    color : white;
}
button a:hover {
    color           : white;
    text-decoration : none;
}
.table td, .table th, .table thead th {
    font-size      : 11px;
    padding        : 3px 3px 3px 10px;
    vertical-align : middle !important;
}
.table.align-top td, .table.align-top tbody td, .table.align-top th, .table.align-top thead th {
    vertical-align : top !important;
}
.table-sm th, .table-sm td {
    font-size : 10px !important;
}
.table th {
    white-space    : nowrap;
    vertical-align : center !important;
}
.th-light-grey{
    background-color : var(--colour-base);
}
.absolute-right {
    position : absolute !important;
    right    : 0 !important;
}
.absolute-top {
    position : absolute;
    top      : 0;
}
.main_base .main-container {
    min-width  : 800px;
    overflow-x : auto;
    height     : calc(100vh - 93px);
}
.supplier_base .main-container {
    min-width  : 800px;
    min-height : calc(100vh - 169px);
}

.card-header-light {
    padding          : 0.25rem 1.25rem;
    margin-bottom    : 0;
    color            : #495057;
    background-color : #e9ecef;
    border-color     : #dee2e6;
}

.card-header-light h6 {
    font-size   : 11px;
    font-weight : bold;
    color       : #495057;
}

.content-block-1200-1600 {
    display            : block;
    margin             : auto;
    min-width          : 1200px;
    max-width          : 1600px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-1400 {
    display            : block;
    margin             : auto;
    min-width          : 1400px;
    max-width          : 1400px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-1300 {
    display            : block;
    margin             : auto;
    min-width          : 1300px;
    max-width          : 1300px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-1200 {
    display            : block;
    margin             : auto;
    min-width          : 1200px;
    max-width          : 1200px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-1100 {
    display            : block;
    margin             : auto;
    min-width          : 1100px;
    max-width          : 1100px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-1000 {
    display            : block;
    margin             : auto;
    min-width          : 1000px;
    max-width          : 1000px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-800-1200 {
    display            : block;
    margin             : auto;
    min-width          : 800px;
    max-width          : 1200px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-900 {
    display            : block;
    margin             : auto;
    min-width          : 900px;
    max-width          : 900px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-880 {
    display            : block;
    margin             : auto;
    min-width          : 880px;
    max-width          : 880px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-800 {
    display            : block;
    margin             : auto;
    min-width          : 800px;
    max-width          : 800px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-700 {
    display            : block;
    margin             : auto;
    min-width          : 700px;
    max-width          : 700px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-600 {
    display            : block;
    margin             : auto;
    min-width          : 600px;
    max-width          : 600px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-500 {
    display            : block;
    margin             : auto;
    min-width          : 500px;
    max-width          : 500px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-400 {
    display            : block;
    margin             : auto;
    min-width          : 400px;
    max-width          : 400px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-300 {
    display            : block;
    margin             : auto;
    min-width          : 300px;
    max-width          : 300px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-230 {
    display            : block;
    margin             : auto;
    min-width          : 230px;
    max-width          : 230px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-200 {
    display            : block;
    margin             : auto;
    min-width          : 200px;
    max-width          : 200px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.content-block-180 {
    display            : block;
    margin             : auto;
    min-width          : 180px;
    max-width          : 180px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

.scroll-container {
    direction  : rtl;
    overflow-x : auto;
    max-width  : 100%;
}

.scroll-container > .margin-auto {
    direction : ltr;
}

.scroll-page-container {
    overflow-x : scroll;
    border     : 1px solid var(--colour-base);
}
.scroll-page-container, .scroll-page {
    transform         : rotateX(180deg);
    -ms-transform     : rotateX(180deg); /* IE 9 */
    -webkit-transform : rotateX(180deg); /* Safari and Chrome */
}
.scroll-page-container th, .scroll-page-container td {
    font-size : 10px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size : 11px;
}
.select2-selection__arrow {
    display : none !important;
}
.select2-container--default {
    width : 100%!important;
}

#div_id_code_supplier_sold_by .select2-container{
    min-width : unset;
}

.table .tr-light td {
  color            : #495057;
  background-color : #e9ecef;
  border-color     : #dee2e6;
}

.thead-blue {
    background : var(--colour-base);
}
.tbody-blue {
    background : var(--colour-light-blue);
}
.sub-legend legend{
    background-color : unset;
    margin-left      : 5px;
}

input.width-50 {
    width : 50px !important;
}
.input-ml-2 input{
    margin-left : 0.5rem;
}
.border-none > div > div > input {
    border : none;
}
.code-input {
    width      : 150px;
    text-align : center;
}
.name-input {
    width : 250px;
}
.date-input {
    width  : 33px !important;
    height : 27px;
}
span.legend-heading{
    width         : 50%;
    background    : var(--colour-base);
    margin-bottom : 15px;
    padding       : 1px 5px;
    font-weight   : bold;
    text-align    : center;
    font-size     : 11px;
}
div.small-input input {
    width      : 33px !important;
    text-align : center !important;
}
div.small-input-m input {
    width      : 52px !important;
    text-align : center !important;
}
input.small-input {
    width      : 33px !important;
    text-align : center !important;
}
input.small-input-m {
    width      : 52px !important;
    text-align : center !important;
}
input.small-input-s {
    width      : 40px !important;
    text-align : center !important;
}
select.small-input {
    width      : 40px !important;
    text-align : center !important;
}
input.medium-input, select.medium-input  {
    width      : 50px;
    text-align : center;
}
input.mid-input, select.mid-input  {
    width      : 60px;
    text-align : center;
}
.hide-labels {
    padding : 0 0 0 5px;
}
.width-col-1 > div, .width-col-1 > div > div > div > select.select {
    width : 70px;
}
.width-col-2 > div {
    width : 110px;
}
.width-col-3 > div {
    width : 130px;
}
.width-col-5 {
    width : 343px !important;
}
.p-0 > div > div > label {
    padding : 0 !important;
}
.radio-d-flex .form-group > div {
    display : flex;
}
.radio-flex .form-group > div {
    display : flex;
}
.radio-flex .form-check {
    width : 55px;
}
.radio-flex label {
    margin-right : 20px;
}
.radio-flex-long .form-group > div,
.radio-flex-auto .form-group > div {
    display : flex;
}
.radio-flex-long .form-check {
    width       : 90px;
    margin-left : 20px;
}
.radio-flex-auto .form-check {
    width        : auto;
    margin-left  : 20px;
    margin-right : 20px;
    white-space  : nowrap;
}
.radio-flex-long label input,
.radio-flex-auto label input {
    position : absolute;
    top      : -4px;
}
.text-center input {
    text-align : center;
}
.text-center label {
    text-align : left;
}
.childshow svg {
    position           : absolute;
    left               : 10px;
    margin-top         : -19px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.childshow svg:hover {
    margin-top : -17px;
}
.childshow svg.flip:hover {
    margin-top : -20px;
}
.childshow th, .childshow td {
    font-size : 10px;
}
.flip {
    -webkit-transform : rotateX(180deg);
    -moz-transform    : rotateX(180deg);
    -ms-transform     : rotateX(180deg);
    -o-transform      : rotateX(180deg);
    transform         : rotateX(180deg);
}
.fake-label {
    margin-top    : 11px !important;
    margin-bottom : 0 !important;
}
.fake-label .form-group {
    margin-bottom : 0 !important;
}
.item-search-form label{
    text-align : left!important;
}
.dark-blue svg {
    fill          : var(--colour-dark-blue);
    width         : 15px !important;
    height        : 15px !important;
    border-radius : 50%;
    padding       : 2px;
    margin-top    : 0px;
    position      : absolute;
    left          : 10px;
}
.dark-gray svg {
    fill          : var(--colour-dark-gray);
    width         : 15px !important;
    height        : 15px !important;
    border-radius : 50%;
    padding       : 2px;
    margin-top    : 0px;
    position      : absolute;
    left          : 10px;
}
.member-add:hover svg {
    background-color   : var(--colour-dark-blue);
    -webkit-transition : 0.3s;
    -moz-transition    : 0.3s;
    -o-transition      : 0.3s;
    transition         : 0.3s;
    cursor             : pointer;
    fill               : white !important;
}
.table-padding {
    padding : 3px !important;
}
.form-group div[id$="is_deleted"].form-check {
    padding-left : 0 !important;
}
.pl-0-form-check .form-check {
    padding-left : 0 !important;
}
.no-bueno {
    cursor : not-allowed;
}
.font10 {
    font-size : 10px;
}
.font11 {
    font-size : 11px;
}
.font12 {
    font-size : 12px;
}
.font14 {
    font-size : 14px;
}

#agent-detail {
    overflow-y : auto;
    overflow-x : hidden;
    height     : 70vh;
}

/************END BASE************/

/***********NAV**************/
.main_base svg.nav-menu, .main_base svg.nav-cancel {
    height : 20px;
    width  : 20px;
    fill   : white;
    cursor : pointer;
    margin : 10px 0;
}
.main_base .nav-container {
    height : 73px;
}
.main_base .navbar {
    background      : var(--colour-dark-base);
    width           : 100%;
    height          : 50px;
    padding         : 0 1rem;
    min-width       : 800px;
    position        : relative;
    display         : flex;
    justify-content : space-between;
}
.main_base .nav-heading {
    top        : -36px;
    position   : relative;
    transition : 0.3s;
    height     : 25px;
}
.main_base .nav-heading h5 {
    color      : white;
    text-align : center;
    font-size  : 17px;
}
.main_base .subnav {
    background         : var(--colour-light-base);
    width              : 100%;
    position           : absolute;
    overflow           : hidden;
    height             : 23px;
    min-width          : 800px;
    scroll-behavior    : unset;
    -webkit-transition : 0.3s;
    -moz-transition    : 0.3s;
    -o-transition      : 0.3s;
    transition         : 0.3s;
    top                : 50px;
}
.main_base .subnav-menu {
    display         : flex;
    justify-content : space-between;
    width           : calc(100% - 50px);
    margin          : 0 10%;
}
@media (max-width: 1000px) {
    .main_base .nav-heading {
        margin-right : 45px;
    }
    .main_base .subnav-menu {
        margin : 0;
    }
    .main_base .subnav a {
        padding : 2px 10px;
    }
}
.main_base .navbar a > svg {
    height : 20px;
    width  : 20px;
    fill   : white;
}
.main_base .navbar #svg-search {
    height        : 16px;
    width         : 16px;
    fill          : gray;
    margin-bottom : 4px;
}
.main_base .subnav svg {
    height : 18px;
    width  : 20px;
}
.main_base .subnav #public {
    right    : 50px;
    height   : 100%;
    width    : 50px;
    padding  : 2px 15px;
    position : absolute;
}
.main_base .subnav a:hover svg {
    fill : white;
}
.main_base .subnav a {
    font-size : 12px;
    color     : var(--colour-dark-base);
    padding   : 2px 20px;
}
.main_base .subnav > a:hover {
    background : var(--colour-gray);
    color      : white;
}
.sticky {
    position  : fixed;
    top       : 0;
    width     : 95%;
    min-width : 800px;
    z-index   : 1;
}

.sticky + .tab-content {
    padding-top : 28px;
}

/***********END NAV**************/

/*********** HREF OVERWRITE **************/
a.href-hidden {
    color : var(--colour-dark-base);
}
a.href-hidden:hover {
    color : var(--colour-blue);
}
/***********END HREF OVERWRITE**************/

/***********ALERT MESSAGES**************/
.alert {
    cursor : pointer;
}
.alert:after {
    content            : "x";
    position           : absolute;
    right              : 10px;
    font-size          : 20px;
    top                : 0;
    padding            : 5px;
    line-height        : 0.75;
    -webkit-transition : 0.2s;
    -moz-transition    : 0.2s;
    -o-transition      : 0.2s;
    transition         : 0.2s;
}
.alert:hover {
    opacity : 1;
}
.alert-warning {
    position         : relative;
    z-index          : 999;
    top              : -2px;
    color            : var(--colour-dark-yellow);
    background-color : var(--colour-light-yellow);
    border-color     : var(--colour-yellow);
    width            : 100%;
    padding          : 5px;
    text-align       : center;
    font-size        : 12px;
    opacity          : 0.9;
    margin-bottom    : 0 !important;
}
.alert-danger {
    position   : relative;
    z-index    : 900;
    top        : -2px;
    width      : 100%;
    padding    : 5px;
    text-align : center;
    font-size  : 12px;
    opacity    : 0.9;
}

.error-messages .alert-danger {
    top : unset;
}
.alert-info, .alert-success {
    position   : relative;
    z-index    : 999;
    top        : -2px;
    padding    : 5px;
    text-align : center;
    font-size  : 12px;
    opacity    : 0.9;
}
#is_loading {
    display     : none;
    font-size   : 10px;
    font-weight : bold;
    position    : fixed;
    bottom      : 2px;
    z-index     : 999;
    width       : 100%;
    text-align  : center;
}
#is_saved {
    display     : none;
    font-size   : 10px;
    font-weight : bold;
    position    : fixed;
    bottom      : 2px;
    color       : var(--colour-dark-red);
    z-index     : 999;
    width       : 100%;
    text-align  : center;
}
#is_saving {
    display     : none;
    font-size   : 10px;
    font-weight : bold;
    position    : fixed;
    bottom      : 2px;
    color       : var(--colour-dark-green);
    z-index     : 999;
    width       : 100%;
    text-align  : center;
}

/***********END ALERT MESSAGES**************/

/***********MENU**************/
.menu-container {
    grid-area  : menu;
    min-height : calc(100vh - 55px);
}
li {
    display : flex;
}
li a {
    color : var(--colour-dark-base);
}
.menu-list-column {
    width : 25%;
}
.menu-list-column-20 {
    width : 20%;
}
.menu-list-block {
    padding : 0 20px;
}
.menu-list-block .sub-heading {
    padding     : 0 0 10px 0;
    font-size   : 14px;
    font-weight : bold;
}
.menu-list-block ul {
    margin-bottom : 20px;
}
.menu-list-block a {
    line-height        : 1;
    color              : var(--colour-link);
    display            : block;
    font-size          : 11px;
    margin             : 4px 0;
    -webkit-transition : 0.2s;
    -moz-transition    : 0.2s;
    -o-transition      : 0.2s;
    transition         : 0.2s;
}

.menu-list-block span {
    font-size : 11px;
    margin    : 1px 0;
}

.menu-list-block a:hover {
    color        : var(--colour-dark-blue);
    padding-left : 4px;
    border-left  : 4px solid var(--colour-dark-blue);
}
.min-textarea{
    max-height : 40px;
    max-width  : 400px;
}

.max-textarea textarea {
    height    : 400px;
    max-width : 100%;
}

@media (max-width: 1200px) {
    .max-textarea textarea {
        height    : 300px;
        max-width : 100%;
    }
}

/***********END MENU**************/


/******************LOGIN******************/
#login, #logout {
    color      : var(--colour-offwhite);
    font-size  : 12px;
    margin-top : -15px;
}
#login:hover, #logout:hover {
    opacity : 0.7;
}
.login-info {
    display    : flex;
    box-shadow : 0 2px 10px -5px #1f2029;
    font-size  : 11px;
    background : var(--colour-xlight-gray);
    padding    : 2px 17px;
    z-index    : 1;
    width      : 100%;
    position   : fixed;
    bottom     : 0;
    height     : 21px;
}

.loginscreen {
    height : 100vh;
}

.loginscreen .loginscreen-header {
    height              : 340px;
    position            : relative;

    background-position : center;
    background-repeat   : no-repeat;
    background-size     : cover;
}

.loginscreen .loginscreen-header img {
    margin     : 0.5rem;
    padding    : 0.25rem;
    max-height : 120px;
    width      : auto;
}

.loginscreen .loginscreen-header div {
    margin-bottom : 63px;
}

.loginscreen .loginscreen-header.fm2a div {
    padding : 33px 53px;
}

.loginscreen .loginscreen-header.fm2a img {
    width : 210px;
}

.loginscreen .loginscreen-header.cuna {

}

.loginscreen .loginscreen-header.cuna img {
    filter : contrast(200%) brightness(150%);
}

.loginscreen .loginscreen-header.tomh img {
    position : absolute;
    right    : 1.25rem;
    top      : 1rem;
}

.loginscreen .loginscreen-header.gros, .loginscreen .loginscreen-header.spra, .loginscreen .loginscreen-header.tomh  {
    display         : flex;
    justify-content : center;
    align-items     : center
}

.loginscreen .user-auth .alert-block {
    position : relative !important;
}

.loginscreen .user-auth .alert:after {
    display : none !important;
}

/***************END LOGIN***************/

/*Turn off bootstrap number arrow spinners*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    margin             : 0;
}
input[type=number] {
    -moz-appearance : textfield;
}

/*****************Arrivals list************/
.arrival-daterange {
    position          : absolute;
    margin-top        : 15px;
    left              : 50%;
    -webkit-transform : translateX(-50%);
    -moz-transform    : translateX(-50%);
    -ms-transform     : translateX(-50%);
    -o-transform      : translateX(-50%);
    transform         : translateX(-50%);
    font-size         : 10px;
    font-weight       : bold;
}

#arrival-calendar table{
    width      : 80%;
    margin     : 5rem auto;
    text-align : center;
}
/*end Arrivals list*/

/*XML load results*/

.mpqload-popup .select2-container {
    width : 100% !important;
}
.mpqload-popup #div_id_trans_type div {
    display : flex;
}
.mpqload-popup #div_id_trans_type div label {
    white-space   : nowrap;
    padding-right : 20px;
}
#xml-items-load{
    margin : auto;
}
.room-result {
    display       : block;
    border        : 1px solid var(--colour-gray);
    height        : 112px;
    padding       : 5px;
    margin-bottom : 5px;
    font-size     : 10px
}

.form-accommodation label.col-form-label {
    padding : 0 0 3px 0 !important;
}
.form-accommodation #div_id_icode_supplier .select2-container {
    width : 100% !important;
}

#div_id_ixml_results {
    margin-top : 1.5rem !important
}

.form-package label.col-form-label {
    padding : 0 0 3px 0 !important;
}

.carhire-item-popup textarea#id_pickup_note{
    height : 20px;
}
.carhire-item-popup textarea#id_dropoff_note{
    height : 20px;
}
.carhire-item-popup #div_id_pickup_time_hh div{
    width        : unset;
    margin-right : 3px;
}
.carhire-item-popup label.col-form-label.requiredField{
    width : unset;
}
/*end XML load results*/

/************ AGENTS NOLOGIN RATEGRID ****/

#agent-nologin-hotel-rategrid-form label.form-check-label {
    width : 130px;
}

/* CUSTOMER ZONE STYLES */
.hotel-rates{
    border     : 1px solid #ccc;
    box-shadow : 0px 1px 8px 0px rgb(0 0 0 / 15%);
}

.hotel-rates-heading{
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding-left    : 3%;
    cursor          : move;
    border-bottom   : 1px solid #ccc;
    background      : #fff;
    height          : 60px;
    box-sizing      : border-box;

}

.hotel-rates-heading h6{
    font-family : 'Open Sans', Verdana, Arial;
    color       : var(--colour-orange);
    font-size   : 17px;
    margin      : 18px;
}

.hotel-rates-form input[type=text]{
    border             : 1px solid #ccc;
    padding            : 0px 6px;
    height             : 30px;
    line-height        : 30px;
    -moz-box-shadow    : inset 0px 0px 6px 0px rgba(180, 180, 180, 0.5);
    -webkit-box-shadow : inset 0px 0px 6px 0px rgb(180 180 180 / 50%);
    box-shadow         : inset 0px 0px 6px 0px rgb(180 180 180 / 50%);
    box-sizing         : border-box;
}

.hotel-rates-form .select2-container--default .select2-selection--single {
    background-color : #fff;
    border-radius    : 4px;
    padding          : 0px 6px;
    line-height      : 30px;
    box-shadow       : inset 0px 0px 6px 0px rgb(180 180 180 / 50%);
    box-sizing       : border-box;
}

.hotel-rates-form label,
.rates-label{
    font-family   : 'Open Sans', Verdana, Arial;
    margin-bottom : unset;
}

.hotel-rates-form-check{
    text-align : center;
    width      : fit-content;
    margin     : 0 auto;
}

.rates-search-bg {
    color         : #777;
    font-size     : 12px;
    margin-bottom : 2px;
}

.btn-rates{
    color            : #fff;
    background-color : #000;
    border-color     : #000;
    width            : 180px;
    margin-left      : 5px;
}

/*************AGENTS FILTER*************/

.agent-report #div_id_iagent {
    margin-left  : 10px;
    margin-right : 5px;
}
#Tenant_Agent_Form label.form-check-label {
    white-space : nowrap;
    margin-top  : 10px;
    margin-left : 10px;
}

.form-group-container #agent_tenant_idate_contracted_mm {
    margin-left : -85px;
    margin-top  : 17px;
}

.form-group-container #agent_tenant_idate_contracted_yy {
    margin-left : -47px;
    margin-top  : 17px;
}


/*************END AGENTS FILTER*************/

/*************EMAIL REQ*************/

#request_confirmation_results td {
    vertical-align : middle;
}
.yes:focus, .no:focus {
    box-shadow : none;
}
.req_yes {
    background : var(--colour-light-green);
}
.req_no {
    background : var(--colour-light-red);
}
.inbox_new_booking {
    background : var(--colour-light-blue);
}
.inbox_old_booking {
    background : var(--colour-base);
}
.inbox_delete_booking {
    background : var(--colour-light-red);
}
.color-disabled {
    color            : var(--colour-disabled)!important;
    background-color : var(--colour-disabled)!important;
}
.disclaimer {
    width     : 50%;
    font-size : 11px;
}
.disclaimer li {
    display         : list-item;
    list-style-type : disc;
}
.book-search input#isearch {
    width : 10rem;
}

/*CKE EDITOR*/
.cke_dialog {
    width : 600px !important;
}

.cke_dialog_body {
    width : 600px !important;
}

.cke_dialog_contents td {
    overflow : visible !important;
}

.cke_dialog_contents {
    width : 600px !important;
}

td.cke_dialog_contents_body {
    width : 600px !important;
}

.cke_dialog_ui_input_select {
    width : 100% !important;
}
#request_confirmation_results input[type="radio"] {
    width  : 15px;
    height : 15px;
}

/*************END EMAIL REQ*************/


/************CANX FORM************/

.suppliercanx-form input[id*="canx2_mmdd"]{
    width : 50px !important;
}
/************END CANX FORM************/


/************CANX TABLE************/

.suppliercanx-table td, .suppliercanx-table th {
    height : 23px;
}
.suppliercanx-table legend {
    padding : 3px 5px !important;
}
/************END CANX FORM************/

/************SUPPLIER DETAILS FORM************/

#supplier-details .alert-danger{
    top : unset;
}
#supplier-detail svg{
    height : 10px;
    width  : 10px;
}
/************END CANX FORM************/

/************ALLOC FORM************/

.supplier-alloc-formset-wrapper {
    width         : 610px;
    border-radius : 5px;
}
.supplier-alloc-table-row {
    height : 40px; !important;
}
.supplier-alloc-form {
    min-width : 610px;
    max-width : 610px;
    display   : flex;
    flex-wrap : wrap;
}

.supplier-alloc-form .form-check{
    padding-left : 5px;
}

.supplier-alloc-form .input-small {
    width  : 32px;
    margin : 5px 2px 5px 0px;
}
.supplier-alloc-form #days {
    margin-left  : 10px;
    margin-right : 5px
}
.supplier-alloc-form #date_from_rolling_dd {
    margin-left : 15px;
}

.supplier-alloc-form #note {
    margin-left : 15px;
    width       : 150px;
}

.supplier-alloc-form .input-medium {
    width  : 60px;
    margin : 10px 5px;
}
.supplier-alloc-form .input-long {
    width  : 90px;
    margin : 10px 5px;
}
.supplier-alloc-form > div > div > input {
    text-align : center;
}
.supplier-alloc-form > div {
    background : var(--colour-light-blue);
    text-align : center;
}
.supplier-alloc-form > div[id*="days_"], .alloc-form > div[id$="days"] {
    margin-right : 5px;
}
.supplier-alloc-form > div[id$="code_room_code"] {
    margin-left : 5px;
}
.supplier-alloc-form > div > div[id$="deleted"] {
    background : var(--colour-light-blue);
    margin     : 0;
    padding    : 0 !important;
}
.supplier-alloc-form > div > div[id$="deleted"] > label {
    margin      : 11px 12px;
    overflow    : hidden;
    width       : 24px !important;
    white-space : nowrap;
}
.text-alloc {
    opacity               : 0.8;
    font-weight           : bold;
    font-size             : 8px;
    background            : var(--colour-green);
    color                 : var(--colour-offwhite);
    position              : absolute;
    left                  : -27px;
    bottom                : 82px;
    padding               : 2px 9px;
    -webkit-transform     : rotate(-90deg);
    -moz-transform        : rotate(-90deg);
    -ms-transform         : rotate(-90deg);
    -o-transform          : rotate(-90deg);
    -webkit-border-radius : 10px 10px 0 0;
    -moz-border-radius    : 10px 10px 0 0;
    border-radius         : 10px 10px 0 0;
}
.alloc-page table {
    margin-left : 9px;
}
.alloc-page table tr > td {
    background     : var(--colour-base);
    text-align     : center;
    text-transform : uppercase;
    border-right   : 5px solid var(--colour-offwhite);
    border-top     : 5px solid var(--colour-offwhite);
    font-size      : 10px;
}
/************END ALLOC FORM************/

/************FORMSETS************/

.width40 {
    width : 40px;
}
.width60 {
    width : 60px;
}
.width70 {
    width : 70px;
}
.width80 {
    width : 80px;
}
.width90 {
    width : 90px;
}
.width180 {
    width : 180px;
}
.width185 {
    width : 185px;
}


td.formset-1 {
    min-width : 72px;
}
td.formset-2 {
    min-width : 50px;
}
td.formset-3 {
    min-width : 274px;
}
td.formset-4 {
    min-width : 92px;
}
td.formset-5 {
    min-width : 82px;
}
td.formset-6 {
    min-width : 138px;
}
td.formset-7{
    min-width : 40px;
    max-width : 40px;
}
.alloc-page td.formset-1 {
    min-width : 70px;
}
.alloc-page td.formset-2 {
    min-width : 50px;
}
.alloc-page td.formset-3 {
    min-width : 270px;
}
.alloc-page td.formset-4 {
    min-width : 92px;
}
.alloc-page td.formset-5 {
    min-width : 20px;
}

/************END FORMSETS************/

/************ITEM CONFIRMATION************/

#item-confirmation input[type="radio"] {
    width  : 15px;
    height : 15px;
}
#confirm-email-items .form-group{
    margin-top : 5px;
}
#confirm-email-items .modal-footer{
    padding : unset;
}
.modal-footer span.footer-message{
    font-size : 11px;
}
/************LOCATOR PI************/

/************CRISPY OVERRIDES************/

.nav-tabs .nav-item {
    font-size : 10px;
}

/************END CRISPY OVERRIDES************/

/******************FORMS*******************/
.form-width {
    display            : block;
    margin             : auto;
    min-width          : 1200px;
    max-width          : 1200px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.form-width label.col-form-label {
    font-size      : 9px;
    text-transform : uppercase;
}

.form-group-container {
    margin  : 0 auto 50px auto;
    padding : 0;
}
.form-group-container-shading{
    background-color : var(--colour-xlight-gray);
    border           : 1px solid var(--colour-light-gray);
}

.form-group-container > p {
    display     : inline-block;
    margin      : 0;
    white-space : nowrap;
    padding     : 3px;
}
.margin-less-50{
    margin-top : -50px;
}
.legend-small legend{
    margin-bottom : 5px!important;
}
.form-width label {
    margin-bottom : 2px;
}
.form-width label.form-check-label {
    background    : none;
    margin-bottom : 0;
}
.form-width .formColumn {
    height : 40px !important;
    /*margin-top: 3px;*/
}
.form-width .formColumn.flex-wrap {
    height : 50px !important;
    /*margin-top: 3px;*/
}
.no-flex .form-group {
    margin-bottom : 1rem;
    display       : block;
    margin-top    : -6px;
}
.button-m6 {
    margin-top : -6px;
}
.form-subheading {
    display    : inline-block;
    min-width  : 276px;
    text-align : center;
    font-size  : 12px;
}
.form-subheading-small {
    display    : inline-block;
    min-width  : 70px;
    text-align : center;
    font-size  : 12px;
}
.form-check-input {
    position : relative;
}
svg.true {
    fill   : #155724;
    width  : 10px;
    height : 10px;
}
svg.false {
    fill   : #721c24;
    width  : 10px;
    height : 10px;
}
.save {
    float : right;
}
.add {
    white-space : nowrap;
}
.subheading-label {
    display       : flex;
    margin-top    : -16px;
    margin-bottom : 12px;
}
.back-link {
    margin-bottom : 20px;
    display       : block;
}
.results-body tr th {
    font-size : 10px;
}
.results-body tr td > svg {
    width  : 10px;
    height : 10px;
}
.results-body tr td a > svg {
    width  : 15px;
    height : 15px;
}
.results-body tr td:hover a > svg {
    fill : var(--colour-dark-blue)
}
svg.true {
    fill   : var(--colour-dark-green);
    width  : 10px;
    height : 10px;
}
svg.false {
    fill   : var(--colour-dark-red);
    width  : 10px;
    height : 10px;
}

.reports-heading th{
    background-color : var(--colour-dark-base);
    color            : var(--colour-xlight-gray);
}
.white-space {
    white-space : inherit !important;
}
.form-group div#div_id_bool_system_message.form-check {
    padding-left : 0 !important;
}

.phonelog.form-group div {
    display : inherit;
}
.hideDiv, .hide {
    display : none;
}
.hideDiv div .form-group input {
    width : 400px;
}

.hidden-td-data {
    display : none;
}

.border-left-white {
    border-left : 3px solid var(--colour-offwhite);
}
div.label-auto div label.col-form-label{
    min-width : auto !important;
}
div.label-auto div label.form-check-label,
.label-auto label{
    min-width : auto !important;
    width     : auto !important;
}
div.min-label div label.col-form-label{
    min-width : 60px !important;
    max-width : 60px;
}
div.med-label div label.col-form-label{
    min-width : 80px !important;
    max-width : 80px;
}
.normal-label div label.col-form-label{
    min-width : 125px !important;
    max-width : 125px;
}
.long-label label {
  min-width : 100px !important;
}
.wrap-label label.col-form-label {
    white-space : normal !important;
}
.form-input-error {
    border-color : rgb(255, 0, 0);
    outline      : 0;
    box-shadow   : 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}

.form-row.nowrap {
    flex-wrap : nowrap !important;
}
.ws-nowrap label.form-check-label {
    white-space : nowrap !important;
}
.ws-nowrap {
    white-space : nowrap !important;
}
.ws-normal {
    white-space : normal !important;
}

/**********END FORMS************/

/***********MODALS***********/

.modal-box .allocation > .form-group > div > input {
    width : calc(100% - 30px) !important;
}
.modal-body{
    padding : unset;
}

/*# TODO: Test if this works on all modals*/
.mpq_costing_list_total_items.modal-border{
    max-height : 80vh;
    overflow   : auto;
}
.modal-body h5 {
    text-transform : capitalize;
    text-align     : center;
    margin-bottom  : 30px;
}

@media print {
    .modal-content{
        width                 : 100vw;
        height                : 100vh;
        position              : absolute;
        left                  : 0;
        top                   : 0;
        -webkit-border-radius : 0;
        -moz-border-radius    : 0;
        border-radius         : 0;
    }
    .modal-dialog {
        max-width : 100vw;
        margin    : 0;
    }
    .modal-footer, .login-info, .content-block-880, .print-hide {
        display : none;
    }
    body {
        overflow-y : hidden;
    }
}

.modal-dialog {
    margin-top : 80px;
}
.panel-body svg{
    width  : 15px;
    height : 15px;
}
.modal-box input[type="radio"],
.modal-box input[type="checkbox"] {
    width : auto;
}
.modal-box table{
    width : 100%;
}
.modal-box th{
    padding : 2px;
}
.modal-heading{
    display          : flex;
    justify-content  : space-between;
    align-items      : center;
    text-transform   : capitalize;
    padding          : 8px;
    margin           : 10px;
    font-size        : 16px;
    background-color : var(--colour-light-gray);
    color            : var(--colour-dark-base);
    cursor           : move;
}
.modal-heading h6{
    margin-bottom : unset;
    font-weight   : bold;
}
.modal-box .product-item-description{
    padding-left : 32px;
}

h6.modal-heading {
    text-align       : center;
    text-transform   : uppercase;
    font-size        : 12px;
    background-image : linear-gradient(to bottom, var(--colour-dark-blue), var(--colour-dark-blue));
    padding          : 3px;
    color            : var(--colour-offwhite);
    margin-bottom    : 0;
}
/*#prepaynotecreate textarea.form-control,*/

#prepaynoteupdate .modal-footer{
    padding : unset;
}
body#prepaid-agents-report{
    overflow-x : unset;
}
/***********END MODALS***********/

/*********** CUSTOM BUTTONS ***********/

.btn-green {
    color            : var(--colour-green);
    background-color : var(--colour-light-green);
    border           : 1px solid var(--colour-green);
    transition       : background 0.5s;
    font-size        : 11px !important;
    white-space      : nowrap;
}
.btn-green:hover {
    background-color : var(--colour-green);
    color            : var(--colour-light-green);
}
.btn-green svg {
    height        : 12px;
    width         : 12px;
    margin-bottom : 3px;
    margin-left   : 4px;
    fill          : var(--colour-green);
}
.btn-green:hover svg {
    fill : var(--colour-offwhite);
}

.modal-box .button-group{
    margin : 0 auto;
}

.margin-auto {
    margin-left  : auto !important;
    margin-right : auto !important;
}
.sortable tr th{
    cursor : pointer;
}
.heading-grey{
    background-color : var(--colour-dark-gray);
    border           : 2px solid var(--colour-dark-gray);
}

.heading-grey th{
    color : var(--colour-offwhite);
}
.form-section{
    display            : block;
    margin             : auto;
    min-width          : 700px;
    max-width          : 720px;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box
}
table#formID{
    width  : 50%;
    margin : 0 auto;
}
.table-50{
    width  : 50%;
    margin : 0 auto;
}

.table-whitespace-wrap td, .table-whitespace-wrap th{
    white-space : normal!important;
}
/*************END BASIC BUTTONS*************/


/*************SEARCH BUTTONS*************/

.btn-search {
    border     : 1px solid var(--colour-dark-base);
    background : var(--colour-base);
}
.btn-search .arrow-right {
    border-left : 8px solid var(--colour-base);
}
.btn-search span.title {
    color : var(--colour-dark-base);
}
.btn-search svg {
    background : var(--colour-dark-base);
}
/*************END SEARCH BUTTONS*************/


/*************ADD BUTTONS*************/
button.btn-success-round {
    background            : var(--colour-green);
    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    border-radius         : 50%;
    height                : 27px;
    width                 : 27px;
    padding               : 0 !important;
}
button.btn-success-round svg {
    fill           : var(--colour-offwhite);
    padding-bottom : 3px; !important;
}
.btn-add {
    border     : 1px solid var(--colour-green);
    background : var(--colour-light-green);
}
.btn-add span.arrow-right {
    border-left : 8px solid var(--colour-light-green);
}
.btn-add span.title {
    color : var(--colour-green);
}
.btn-add svg {
    background : var(--colour-green);
}
/*************END ADD BUTTONS*************/

/*************SEARCH BUTTONS*************/
.toggle-search-btn{
    position : absolute;
}

/*************END ADD BUTTONS*************/


/*************BACK BUTTONS*************/

.back-btn {
    height   : 20px !important;
    position : absolute;
    left     : 10px;
}
.back-btn svg, .back-btn a svg {
    width              : 20px !important;
    height             : 20px !important;
    -webkit-transition : all 0.1s;
    -moz-transition    : all 0.1s;
    -ms-transition     : all 0.1s;
    -o-transition      : all 0.1s;
    transition         : all 0.1s;
}
.back-btn svg:hover, .back-btn a svg:hover {
    opacity : 0.5;
}

/*************END BACK BUTTONS*************/

/************EXCHANGE RATE SEARCH PAGE************/

.exchange-search-tester .btn-exchange {
    margin-top : -12px;
}
#exchange-create input#submit-id-submit {
    margin-top : -12px;
}

/************END EXCHANGE RATE SEARCH PAGE************/

/************PI SEARCH PAGE************/

.pi-search .form-check-label {
    font-size     : 9px !important;
    padding       : 4px 6px;
    border-radius : 6px;
}
.pi-search input[type="checkbox"] {
    margin : 0;
}
.pi-search input[type="radio"] {
    position   : absolute;
    margin-top : -2px;
}

.pi-search #div_id_isupplier_type div {
    display    : flex;
    margin-top : 1px;
}
.pi-search #div_id_isupplier_type .form-check {
    width : 85px;
}
/************END PI SEARCH PAGE************/


/***********ALL TARIFF PAGES***********/

.tariff-btn-container {
    height     : 27px;
    background : var(--colour-light-gray);
}

.tariff-btn-container .btn {
    color            : var(--colour-dark-base);
    background-color : var(--colour-light-gray);
    border-right     : 1px solid var(--colour-gray);
}

.tariff-btn-container .btn:focus {
    box-shadow : none;
}

.tariff-btn-container .btn:hover {
    background-color : var(--colour-gray);
}

.tariff-rate-block td,
.tariff-rate-table td{
    white-space : normal;
}

@media screen and (max-width: 1300px) {
    .tariff-rate-block .content-block-1000 {
        min-width : 800px;
        max-width : 800px;
    }
}
@media screen and (min-width: 1300px) and (max-width: 1600px) {
    .tariff-rate-block .content-block-1000 {
        min-width : 800px;
        max-width : 800px;
    }
    .tariff-rate-block .content-block-300 {
        min-width : 250px;
        max-width : 250px;
    }
}
@media screen and (min-width: 1600px) and (max-width: 1949px) {
    .tariff-rate-block .content-block-230 {
        min-width : 230px;
        max-width : 230px;
    }
    .tariff-rate-block .content-block-300 {
        min-width : 300px;
        max-width : 300px;
    }
    .tariff-rate-block .content-block-1000 {
        min-width : 1000px;
        max-width : 1000px;
    }
}

@media screen and (min-width: 1950px) {
    .tariff-rate-block .content-block-300 {
        min-width : 400px;
        max-width : 400px;
    }
    .tariff-rate-block .content-block-1000 {
        min-width : 1200px;
        max-width : 1200px;
    }
}

.ground-product-tariff-create #div_id_stay_from_dd,
.tour-tariff-create #div_id_start_from_dd {
    margin-left : 20px;
}

.tariff-copy div.form-group{
    flex-wrap : nowrap;
}
.copy-dates div {
    width      : 115px;
    text-align : left;
    font-size  : 11px;
    padding    : 2px;
}

.tariff_note {
    border : none;
}
.tariff-list {
    overflow-y : scroll;
    border     : 1px solid var(--colour-gray);
    min-height : calc(100vh - 200px);
}

.tariff-page #value-add-list {
    max-height : 50vh;
    overflow-y : scroll;
}

a.tariff-menu {
    padding            : 0 30px;
    -webkit-transition : 0.2s all;
    -moz-transition    : 0.2s all;
    -ms-transition     : 0.2s all;
    -o-transition      : 0.2s all;
    transition         : 0.2s all;
    color              : gray;
}

.small-box{
    width : 50px;
}

a.tariff-menu:hover {
    opacity : 0.5;
}
.bg-xlight-gray{
    background-color : var(--colour-xlight-gray);
}
.bg-blue{
    background-color : #cce5ff;
}
.bg-light-blue{
    background-color : var(--colour-light-blue);
}

.bg-purple{
    background-color : var(--colour-purple);
}

.search-bg {
    background    : var(--colour-base);
    font-weight   : bold;
    font-size     : 10px;
    border-right  : 1px solid var(--colour-offwhite);
    border-bottom : 1px solid var(--colour-offwhite);
    padding       : 0 5px;
    width         : 100%;
    text-align    : center;
}
.search-bg-light-gray {
    background    : var(--colour-light-gray);
    font-weight   : bold;
    font-size     : 10px;
    border-right  : 1px solid var(--colour-offwhite);
    border-bottom : 1px solid var(--colour-offwhite);
    padding       : 0 5px;
    width         : 100%;
    text-align    : center;
}

.search-bg:last-of-type {
    border-right : none;
}
.tour-date{
    width  : 40rem;
    margin : 2rem auto;
}

.tour-date .date-input{
    width : 4rem;
}

#copy-tariff-btn{
    margin-right : 25%;
}
#hotel-tariff .card{
    width  : 80%;
    margin : 0 auto;
}

#ground-tariff .card{
    width  : 80%;
    margin : 0 auto;
}

.form-add{
    padding       : 0;
    width         : 14px;
    height        : 14px;
    border-radius : 5px;
}
.form-add svg {
    fill          : var(--colour-dark-blue);
    height        : 14px;
    width         : 14px;
    padding       : 2px;
    margin-bottom : 1px;
}
a.modal_inclusions svg, a.modal_exclusions svg, a.modal_value_adds svg {
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
a.modal_inclusions legend, a.modal_exclusions legend, a.modal_value_adds legend {
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
a.modal_inclusions:hover legend, a.modal_exclusions:hover legend, a.modal_value_adds:hover legend {
    background-color : var(--colour-dark-blue);
}
a.modal_inclusions:hover, a.modal_exclusions:hover, a.modal_value_adds:hover {
    color : var(--colour-offwhite);
}
a.modal_inclusions:hover svg, a.modal_exclusions:hover svg, a.modal_value_adds:hover svg {
    fill : var(--colour-offwhite);
}

.display-list p {
    font-size      : 10px;
    margin         : 0;
    min-width      : 300px !important;
    max-width      : 300px !important;
    padding        : 1px 5px !important;
    vertical-align : top !important;
    white-space    : pre-wrap !important;
}

.note-list {
    border        : 1px solid var(--colour-base);
    border-radius : 5px;
}
.note-list p {
    font-size      : 10px;
    margin         : 0;
    min-width      : 200px !important;
    max-width      : 200px !important;
    padding        : 1px 5px !important;
    vertical-align : top !important;
    white-space    : pre-wrap !important;
    border-bottom  : 1px solid var(--colour-base);
}
.set-width100 {
    min-width : 100px;
    max-width : 100px;
}
.mini-textarea textarea.form-control {
    height : 27px !important;
}
.small-textarea textarea.form-control {
    height : 36px !important;
}
.medium-textarea textarea.form-control {
    height : 42px !important;
}
.tariff-heading {
    font-size   : 14px;
    font-weight : bold;
    color       : dimgray;
    padding     : 1px 0px 3px 8px !important;
    text-align  : left;
}
.menu-tariff a {
    z-index : 2;
}

.tariff_agent_sell   {
    display   : flex !important;
    position  : absolute;
    transform : translateX(160%);
    width     : 450px;
}
.tariff_agent_sell #div_id_isell_agent {
    margin-top : 4px;
    height     : 18px;
}
.tariff_agent_sell #div_id_ishow_sell {
    margin-top : 15px;
    height     : 18px;
}
.tariff_agent_sell #div_id_ishow_sell .form-check-label {
    font-size : 9px;
}

@media (max-width: 1330px) {
    .tariff_agent_sell   {
        position  : relative;
        transform : translateX(-5px);
    }
}
.showitem_button {
    padding    : 0 !important;
    text-align : center;
}
.showitem_button a {
    font-size   : 13px;
    font-weight : bold;
    width       : 22px;
    height      : 22px;
}
/***********END ALL TARIFF PAGES***********/

/*********TARIFFS MODALS**********/
#TariffNoteModal label {
    display : none;
}
.modal_car svg {
    width  : 15px;
    height : 15px;
}
.modal.show .modal-dialog.car-detail {
    min-width : 800px;
}
.modal-dialog.car-detail .modal-border {
    display : flex;
    width   : 100%;
}
.modal-dialog.car-detail .modal-border .car-img {
    width       : 500px;
    background  : lightgray;
    border      : 2px solid darkgray;
    padding-top : 100px;
    text-align  : center
}
/*********END TARIFFS MODALS**********/

/*********RES BOOKINGS********/

#bookingupdateform, .date-release label {
    margin-left : 20px
}

#bookingForm #div_id_booking div {
    padding-left : 12px;
    /*display: flex;*/
}

#bookingForm #div_id_booking .form-check {
    width : 100px;
}
.inactive-booking {
    opacity : 0.5;
}
.inactive-section {
    opacity : 0.3;
}

.div_id_date_type div {
    text-align : center;
    display    : flex !important;
}
.inactives_showhide {
    background : none;
    border     : none;
    color      : var(--colour-dark-blue);
}
.inactives_showhide:hover {
    color : var(--colour-dark-blue);
}
.hover-text a {
    color                 : var(--colour-dark-base)!important;
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text a:hover {
    color : var(--colour-dark-blue);
}
.hover-text-green a,
.hover-text-green {
    color                 : var(--colour-green);
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text-green a:hover {
    color : var(--colour-dark-base);
}
.hover-text-blue a,
.hover-text-blue {
    color                 : var(--colour-dark-blue);
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text-blue a:hover {
    color : var(--colour-dark-base);
}
.hover-text-red a,
.hover-text-red {
    color                 : var(--colour-red);
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text-red a:hover {
    color : var(--colour-dark-base);
}
.hover-text-black a,
.hover-text-black {
    color                 : var(--colour-black);
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text-black a:hover {
    color : var(--colour-dark-blue);
}
.hover-text-purple a,
.hover-text-purple {
    color                 : var(--colour-medium-purple);
    padding               : 0;
    -webkit-border-radius : 10px;
    -moz-border-radius    : 10px;
    border-radius         : 10px;
    -webkit-transition    : all 0.2s;
    -moz-transition       : all 0.2s;
    -ms-transition        : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
}
.hover-text-purple a:hover {
    color : var(--colour-dark-blue);
}
a.hover-bg {
    border             : 1px solid var(--colour-offwhite);
    background         : var(--colour-base);
    padding            : 2px 10px 4px 10px;
    border-radius      : 6px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
a.hover-bg:hover {
    border : 1px solid var(--colour-base);
}
a.combo-rate-bg {
    border             : 1px solid var(--colour-offwhite);
    background         : #f2d781;
    padding            : 2px 10px 4px 10px;
    border-radius      : 6px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
a.combo-rate-bg:hover {
    border : 1px solid #f2d781;
}

.booking-check {
    display        : block;
    text-transform : capitalize;
    font-weight    : bold;
}
#book-search-btn {
    background  : 0;
    border      : none;
    margin-left : -30px;
}

#book-search-btn:focus {
    outline : none;
}
#itemnames-update input{
    width : unset;
}

.table thead.items-container th {
    vertical-align : middle !important;
    border-bottom  : 0;
}
.wrapped-table td {
    white-space : normal !important;
}


/*********BOOKINGS LOAD DROPDOWN********/

.dropdown {
    position     : relative;
    display      : inline-block;
    float        : left;
    border-right : 1px solid var(--colour-dark-blue);
}

.dropdown-content {
    display          : none;
    position         : absolute;
    background-color : #f9f9f9;
    min-width        : 220px;
    box-shadow       : 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index          : 1;
    top              : 27px;
}

.dropdown-content a {
    color           : black;
    padding         : 5px;
    text-decoration : none;
    display         : block;
    font-size       : 11px;
}
.dropdown-content a:hover {
    background-color : var(--colour-light-blue);
}

.dropdown:hover .dropdown-content {
    display : block;
}

.dropdown-sub-item{
    padding-left : 4px;
    border-left  : 4px solid #6c757d;
}

/*********BOOKINGS LOAD DROPDOWN - PACKAGE QUOTES ********/
.booking-btn-container-package-quote .dropdown {
    position     : relative;
    display      : inline-block;
    float        : left;
    border-right : 1px solid var(--colour-medium-purple);
}

.booking-btn-container-package-quote .dropdown-content a:hover {
    background-color : var(--colour-light-purple);
}

/*********END BOOKINGS LOAD DROPDOWN********/

/* BLUE BUTTON BAR */
.booking-btn-container {
    height     : 27px;
    background : var(--colour-dark-blue);
}
#booking-btn-grp .btn {
    color            : var(--colour-offwhite);
    background-color : var(--colour-dark-blue);
    border-right     : 1px solid var(--colour-blue);
}

#booking-btn-grp .btn:hover{
    color            : var(--colour-offwhite);
    background-color : var(--colour-dark-blue);
}

#booking-btn-grp .border-left{
    border-left : 1px solid var(--colour-dark-blue)!important;
}

/* PURPLE BUTTON BAR */
.booking-btn-container-package-quote {
    height     : 27px;
    background : var(--colour-medium-purple);
}
.booking-btn-container-package-quote #booking-btn-grp .btn {
    color            : var(--colour-offwhite);
    background-color : var(--colour-medium-purple);
    border-right     : 1px solid var(--colour-gray);
}

.booking-btn-container-package-quote #booking-btn-grp .border-left{
    border-left : 1px solid var(--colour-medium-purple)!important;
}

.booking-btn-container-package-quote #booking-btn-grp .btn:hover{
    color            : var(--colour-offwhite);
    background-color : var(--colour-medium-purple);
}

#booking-btn-grp .btn, .tariff-btn-container .btn {
    padding            : 5px 10px !important;
    cursor             : pointer;
    float              : left;
    font-weight        : bold;
    font-size          : 10px;
    margin             : 0;
    border-radius      : 0;
    min-width          : 5rem;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}

#booking-btn-grp.btn-toolbar{
    width            : fit-content;
    background-color : var(--colour-xlight-gray);
    padding          : 0 8px;
}

.booking-bool-btn .btn {
    float              : right;
    min-width          : 5rem;
    border-left        : 1px solid var(--colour-xlight-gray);
    padding            : 5px !important;
    cursor             : pointer;
    font-weight        : bold;
    font-size          : 10px;
    margin             : 0;
    border-radius      : 0;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.booking-bool-btn .btn:hover {
    background : var(--colour-base);
}
#booking-update2 p{
    margin-bottom : 0;
}

h5#supplier-details-modal{
    text-align    : center;
    margin-bottom : 1rem;
}
#supplierdetail-terms th{
    padding-left : 12px;
}
#supplierdetail-terms td{
    padding-left : 15px;
}
#itemnotes-popup form {
    text-align : center;
    display    : block;
}
#bookingnotes-popup textarea{
    padding : 5px;
}
#div_id_supplier_note.form-group, #div_id_agent_note.form-group, #div_id_private_note.form-group {
    display : block;
}
label[for="id_supplier_note"], label[for="id_agent_note"], label[for="id_private_note"] {
    font-weight  : bold;
    width        : 100%;
    padding-left : 0;
}
.modal.show, .modal-open {padding : 0 !important;}

.booking_item_date_error {
    color  : red;
    cursor : pointer;
}
.warning-notice-booking-btn {
    position      : absolute;
    top           : -45px;
    width         : 100%;
    text-align    : center;
    opacity       : 0.7;
    font-size     : 11px;
    border-radius : 7px;
}
.nofocus:focus {
    box-shadow : none !important;
    outline    : none !important;
}
.cursor_pointer:hover {
    cursor : pointer;
}
td.cursor_pointer:hover {
    cursor : pointer;
}
.cursor_context:hover {
    cursor : context-menu;
}

.cursor-help {
    cursor : help;
}

.email-create .cke_1.cke.cke_reset.cke_chrome.cke_editor_id_content.cke_ltr.cke_browser_webkit.cke_hidpi {
    width : unset !important;
}

.email-create .sys-msg {
    padding-left : 110px;
}

.provisionalsvg svg {
    fill   : steelblue;
    margin : 0 !important;
}
.waitlistsvg svg {
    margin : 0 !important;
}
.waitlistsvg svg circle {
    fill : goldenrod;
}
.modal_itemnote {
    white-space : nowrap !important;
}
.currency_btn {
    padding            : 1px 2px;
    color              : var(--colour-dark-blue);
    cursor             : pointer;
    font-size          : 10px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.currency_btn.active {
    font-weight : bold;
    color       : var(--colour-dark-base) !important;
}
.siproforma_currency_btn {
    padding            : 1px 2px;
    color              : var(--colour-dark-blue);
    cursor             : pointer;
    font-size          : 10px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.siproforma_currency_btn.active {
    font-weight : bold;
    color       : var(--colour-dark-base) !important;
}
.pi_currency_btn {
    padding            : 1px 2px;
    color              : var(--colour-dark-blue);
    cursor             : pointer;
    font-size          : 10px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.pi_currency_btn.active {
    font-weight : bold;
    color       : var(--colour-dark-base) !important;
}
.si_currency_btn {
    padding            : 1px 2px;
    color              : var(--colour-dark-blue);
    cursor             : pointer;
    font-size          : 10px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.si_currency_btn.active {
    font-weight : bold;
    color       : var(--colour-dark-base) !important;
}
.receiptsitem_currency_btn {
    padding            : 1px 2px;
    color              : var(--colour-dark-blue);
    cursor             : pointer;
    font-size          : 10px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.receiptsitem_currency_btn.active {
    font-weight : bold;
    color       : var(--colour-dark-base) !important;
}
/*********END RES BOOKINGS********/

/*********TOURITEM POPUP********/
.touritem-popup #div_id_pickup_time_mm:before,
.touritem-popup #div_id_dropoff_time_mm:before {
    content   : ':';
    font-size : 14px;
    position  : absolute;
    top       : 1px;
    left      : -1px;
}
.touritem-popup textarea.form-control {
    min-height : 59px !important;
    width      : calc(100% - 10px);
}
/*********END TOURITEM POPUP********/


/*********RAILRITEM POPUP********/
.railitem-popup #div_id_pickup_time_mm:before,
.railitem-popup #div_id_dropoff_time_mm:before {
    content   : ':';
    font-size : 14px;
    position  : absolute;
    top       : 0;
    left      : -1px;
}
.railitem-popup textarea.form-control {
    min-height : 59px !important;
    width      : calc(100% - 10px);
}
/*********END RAILITEM POPUP********/

/****************** LOAD BOOKING ********************/
.load-animation {
    position                   : absolute;
    right                      : 4px;
    top                        : 4px;
    width                      : 10px;
    height                     : 18px;
    display                    : none;
    animation-name             : loading;
    animation-duration         : 1.5s;
    animation-timing-function  : linear;
    animation-iteration-count  : infinite;
    -webkit-animation-name     : loading;
    -webkit-animation-duration : 1.5s;
}
.load-animation svg {
    margin : 0;
    width  : 10px;
    height : 10px;
    fill   : rgba(0,0,0,0.3);
}

@-webkit-keyframes loading {
    from {transform : rotate(0deg);}
    to {transform : rotate(360deg);}
}

@keyframes loading {
    from {transform : rotate(0deg);}
    to {transform : rotate(360deg);}
}

.modal-dialog.xsmall-modal {
    min-width : 330px;
    max-width : 330px;
}

.modal-dialog.small-modal {
    min-width : 480px;
    max-width : 480px;
}

.modal-dialog.medium-modal {
    min-width : 800px;
    max-width : 800px;
}

.modal-dialog.large-modal {
    min-width : 1005px;
    max-width : 1005px;
}

.modal-dialog.mpbname-modal {
    min-width : 1200px;
    max-width : 1200px;
}

.modal-dialog.xlarge-modal {
    min-width : 1405px;
    max-width : 1405px;
}
#adhoc form,
#flight form{
    align-items : center;
}
div#adhoc,
div#flight{
    margin : 3rem 0;
}
#loadflight #div_id_cost .col-form-label,
#adhoc #div_id_cost .col-form-label {
    width : auto !important;
}

/****************** END LOAD BOOKING ********************/

/****************** ADD NEW BOOKING ********************/
div#book-search {
    margin        : 0 auto;
    margin-bottom : 5px;
}

input#isearch {
    min-width : 10rem;
}

/****************** END ADD NEW BOOKING ********************/


/***********BOOKING NAMES MODAL***********/

#bookingnames-update .nav-tabs .nav-link.active {
    margin-right     : 2px;
    background-color : var(--colour-xlight-gray);
    font-weight      : bold;
}

#bookingnames-update .nav-tabs .nav-link:not(.active) {
    margin-right     : 2px;
    background-color : white;
    border           : 1px solid var(--colour-xlight-gray);
    border-radius    : 3px;
}

#bookingnames-update .nav-tabs .nav-link.active:active,
#bookingnames-update .nav-item:focus-visible {
    background-color : white;
    border           : 1px solid var(--colour-xlight-gray);
    border-radius    : 3px;
    outline          : none;
    box-shadow       : none;
}

#bookingnames-update .nav-tabs .nav-link.active:focus-visible,
#bookingnames-update .nav-tabs .nav-link.active:focus {
    outline    : none !important;
    box-shadow : none !important;
    border     : none !important;
}

#bookingnames-update .nav-tabs .nav-link:focus,
#bookingnames-update .nav-tabs .nav-link:focus-visible {
    box-shadow : none !important;
    outline    : 0 !important;
}

#bookingnames-update th,
#itemnames-update-travel-info th {
    background     : var(--colour-light-gray);
    text-align     : center;
    text-transform : uppercase;
    border-right   : 1px solid var(--colour-offwhite);
    border-top     : 5px solid var(--colour-offwhite);
    font-size      : 10px;
    font-weight    : bold;
}

#bookingnames-update .passenger-row .form-group{
    margin-top    : unset!important;
    margin-bottom : unset !important;
}

.bookingnames-update input[name$="passport_number"],
.bookingnames-update select[name$="country"],
.bookingnames-update input[name$="id_number"] {
    width      : 100%;
    text-align : left;
}

@media (min-width: 576px) {
    .modal-dialog.bookingnames { /* Group */
        min-width : 845px;
        max-width : 845px;
    }
}
@media (min-width: 576px) {
    .modal-dialog.bookingnames2 { /* FIT */
        min-width : 1275px;
        max-width : 1275px;
    }
}
.bookingnames-update .button-group {
    width : 100%;
}
/***********END BOOKING NAMES MODAL***********/

/**************itempricesform******************/
.itempricesform{
    margin : 0 auto;
}
.itempricesform input[name$="is_deleted"] {
    display : none;
}
.itempricesform label {
    display : none;
}
.itempricesform input:read-only {
    border     : none;
    background : transparent;
}
.itempricesform input {
    border-radius : 5px;
    margin-bottom : 2px;
}
.itempricesform > readonly {
    border : none;
}
.itempricesform input[name$="edit_bool"] {
    width  : 17px;
    margin : 0;
}
.itempricesform #id_booking_ref {
    width : 70px;
}

/**************END itempricesform******************/

/************LEAD UPDATE************/
.lead-update table {
    width       : 100px;
    left        : 50%;
    position    : relative;
    transform   : translateX(-50%);
    line-height : 2.2;
}

.lead-update input[type="radio"] {
    vertical-align : middle;
}
#itemnames-update table {
    width       : 100px;
    left        : 45%;
    position    : relative;
    transform   : translateX(-50%);
    line-height : 2.2;
}

#itemnames-update input[type="checkbox"] {
    vertical-align : middle;
}
/************END LEAD UPDATE************/

/************GP SECTION************/
#div_id_gp_comment {
    margin-bottom : 25px;
    margin-top    : 8px;
}
.summaryheading {
    display    : flex;
    background : #343a40;
}
.summaryheading div {
    font-size   : 11px;
    padding     : 1px 3px;
    color       : white;
    font-weight : bold;
}
.summaryheading-light {
    background : #e9ecef;
}
.summaryheading-light div {
    color            : #495057;
    background-color : #e9ecef;
    border-color     : #dee2e6;
    font-size        : 11px;
    padding          : 3px 3px 3px 10px;
    vertical-align   : middle !important;
}
details {
    border-left   : 1px solid #abb3ba;
    border-bottom : 1px solid #abb3ba;
    border-right  : 1px solid #abb3ba;
}
details.details-light {
    border-left   : 1px solid #dee2e6;
    border-bottom : 1px solid #dee2e6;
    border-right  : 1px solid #dee2e6;
}
.details-light .table {
    border : 3px solid #dee2e6;
}
summary::-webkit-details-marker {
    color        : var(--colour-gray);
    font-size    : 16px;
    margin-right : 2px;
}
details:hover summary::-webkit-details-marker:hover {
    color : var(--colour-xlight-gray);
}
summary:focus,
details:focus {
    outline : var(--colour-light-gray) auto 1px;
}
.summarygrey{
    background-color : var(--colour-light-gray);
    margin-bottom    : 2px;
}
.summaryflex div {
    font-size    : 11px;
    padding      : 1px 3px;
    border-right : 1px solid #dee2e6;
}
.summaryflex div:last-of-type {
    border-right : none;
}
.summaryrow div {
    font-size      : 11px;
    padding        : 3px 3px 3px 10px;
    vertical-align : middle !important;
    border-right   : none;
}
.summaryheading .flex1, .summaryflex .flex1 {
    flex : 1;
}
.summaryheading .flex2, .summaryflex .flex2 {
    flex : 2;
}
.summaryheading .flex3, .summaryflex .flex3 {
    flex : 3;
}
.belowgp-search #id_id_idate_type_0_1,
.belowgp-search #id_id_idate_type_0_2 {
    top : 2px;
}
/************END GP SECTION************/

/*********** ITEM ORDER ************/

#items tr td.item-m{
    width   : 60px;
    padding : 6px 2px;
}
#items tr td.item-xl{
    width   : 270px;
    padding : 6px 2px;
}
#items tr td.item-sm{
    width   : auto;
    padding : 6px 4px;
}
/***********END ITEM ORDER ************/

/******************TABS*******************/

.wizard {
    white-space        : nowrap;
    text-align         : center;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}
.wizard a {
    background      : var(--colour-light-gray);
    display         : inline-block;
    margin-right    : 5px;
    min-width       : 150px;
    outline         : none;
    padding         : 5px 40px;
    position        : relative;
    text-decoration : none;
}
.tenant_supplier_wizard .wizard a {
    min-width : 100px !important;
    padding   : 5px 30px !important;
}
.wizard a:hover {
    color      : var(--colour-dark-blue);
    background : var(--colour-light-blue);
}
.wizard a:hover:after {
    border-left : 15px solid var(--colour-light-blue);
}
.wizard a.active:hover:after {
    border-left : 15px solid var(--colour-light-blue);
}
.wizard .active {
    background : var(--colour-dark-blue);
    color      : var(--colour-offwhite);
}
.wizard a.active:after {
    border-left : 15px solid var(--colour-dark-blue);
}
.wizard a:before {
    width         : 0;
    height        : 0;
    border-top    : 15px inset transparent;
    border-bottom : 15px inset transparent;
    border-left   : 15px solid var(--colour-offwhite);
    position      : absolute;
    content       : '';
    top           : 0;
    left          : 0;
}
.wizard a:after {
    width         : 0;
    height        : 25px;
    border-top    : 15px inset transparent;
    border-bottom : 15px inset transparent;
    border-left   : 15px solid var(--colour-light-gray);
    position      : absolute;
    content       : '';
    top           : 0;
    right         : -14px;
    z-index       : 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
    border : none;
}

.wizard a:first-child {
    -webkit-border-radius : 8px 0 0 8px;
    -moz-border-radius    : 8px 0 0 8px;
    border-radius         : 8px 0 0 8px;
}

.wizard a:last-child {
    -webkit-border-radius : 0 8px 8px 0;
    -moz-border-radius    : 0 8px 8px 0;
    border-radius         : 0 8px 8px 0;
}

/******************END OF TABS*******************/

/**************SUPPLIERS FEATURED**************/

#div_id_featured label {
    width : 350px;
}
#div_id_not_sold > label, #div_id_featured > label {
    display : none;
}
#div_id_featured input {
    float : right;
}
#div_id_not_sold label {
    width       : 20px;
    overflow    : hidden;
    white-space : nowrap;
}

#div_id_i_preferred div,
#div_id_i_rated_type div{
    display : flex;
}
.preferredsupplier .form-group #div_id_i_preferred .form-check,
.preferredsupplier .form-group #div_id_i_rated_type .form-check {
    margin : 0;
}
.preferredsupplier .form-group #id_i_rating_no {
    width : 90px;
}
/**************END SUPPLIERS FEATURED**************/

/****************** FEAT NONFEAT BLOCK ********************/

.modal-dialog.feat-block tbody > tr {
    min-width : 200px;
    height    : 20px;
}
.modal-dialog.feat-block tbody > tr > td {
    padding : 0;
    height  : 15px;
}

/****************** END FEAT NONFEAT BLOCK ********************/

.departschedule_calendar ul {
    width      : 310px !important;
    list-style : none;
    padding    : 0;
    margin     : 0;
}

.departschedule_calendar li {
    display               : grid !important;
    grid-template-columns : repeat(7, 42px);
    grid-gap              : 1px;
    width                 : 314px;
    margin                : 0;
    padding               : 4px;
    grid-template-rows    : auto auto repeat(6, 22px);
    border                : 3px solid #eee;
    box-sizing            : border-box;
    flex-wrap             : unset !important;
}

.monthdisplay {
    grid-column    : 1 / -1;
    grid-row       : 1;
    border         : none;
    width          : 100%;
    padding        : 4px;
    text-align     : center;
    text-transform : uppercase;
    font-weight    : 600;
    margin         : 0 0 3px 0;
    background     : var(--colour-light-blue, #f8f9fa);
    border-radius  : 5px;
    font-size      : 12px;
}

.weekdisplay {
    grid-column           : 1 / -1;
    grid-row              : 2;
    width                 : 100%;
    display               : grid;
    grid-template-columns : repeat(7, 42px);
    grid-gap              : 1px;
    border-radius         : 5px;
    padding               : 1px;
    margin                : 0 0 3px 0;
}

.weekdisplay span {
    width           : 42px;
    height          : 18px;
    border          : none;
    text-align      : center;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 10px;
    font-weight     : 600;
    background      : white;
    border-radius   : 3px;
}

.departschedule_calendar .form-group {
    width           : 42px;
    height          : 22px;
    margin          : 0 !important;
    padding         : 0;
    box-sizing      : border-box;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid #dee2e6;
    border-radius   : 4px;
    background      : white;
    transition      : all 0.15s ease;
}

.departschedule_calendar .form-group:hover {
    transform  : translateY(-1px);
    box-shadow : 0 2px 4px rgba(0,0,0,0.1);
}

.departschedule_calendar a .form-group {
    background   : linear-gradient(135deg, #e3f2fd, #d1e6f72e) !important;
    border-color : #1976d226 !important;
    color        : #1976d2;
    font-weight  : 600;
    min-height   : 22px;
    height       : 22px !important;
}

.departschedule_calendar a:hover .form-group {
    background : linear-gradient(135deg, #e8eaf6, #f5f5f5) !important;
    transform  : translateY(-1px);
    box-shadow : 0 3px 6px rgba(0,0,0,0.15);
}

.departschedule_calendar .form-group[style*="grid-area"][style*="/ 7"] {
    border-right : 1px solid #dee2e6;
}

.departschedule_calendar .form-group[style*="grid-area: 8"] {
    border-bottom : 1px solid #dee2e6;
}

.departschedule_calendar .form-check {
    margin          : 0;
    padding         : 0;
    width           : 100%;
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.departschedule_calendar div[id*="bool"] {
    width           : 100%;
    height          : 100%;
    margin          : 0;
    border          : none;
    box-sizing      : border-box;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.departschedule_calendar .form-check-label {
    min-width       : unset;
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 100%;
    height          : 100%;
    margin          : 0;
    padding         : 0 0 0 3px;
    cursor          : pointer;
    font-size       : 12px;
    font-weight     : 500;
    border-radius   : 4px;
    transition      : background-color 0.15s ease;
}

.departschedule_calendar .checkboxinput {
    margin-top  : unset;
    margin-left : 0.2rem;
}

.departschedule_calendar a {
    text-decoration : none;
    display         : block;
    position        : relative;
    width           : 42px !important;
    height          : 22px !important;
    margin          : 0;
    padding         : 0;
    box-sizing      : border-box;
    border-radius   : 4px;
    transition      : all 0.15s ease;
    z-index         : 5;
    pointer-events  : auto;
}

.departschedule_calendar a .form-group {
    width    : 100%;
    height   : 100%;
    position : relative;
    margin   : 0 !important;
}

.departschedule_calendar a .form-group,
.departschedule_calendar a .form-check,
.departschedule_calendar a .form-check-label {
    pointer-events : none;
}

.departschedule_calendar a .checkboxinput {
    pointer-events : auto;
}

.calendar_plus {
    position        : absolute;
    right           : 0px;
    top             : 0px;
    font-size       : 7px;
    color           : #1976d2;
    z-index         : 10;
    pointer-events  : none;
    background      : rgba(255,255,255,0.9);
    border-radius   : 50%;
    width           : 10px;
    height          : 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-weight     : bold;
    border          : 1px solid rgba(25, 118, 210, 0.3);
}

a.blankday {
    width      : 42px;
    height     : 22px;
    display    : block;
    border     : none;
    box-sizing : border-box;
    background : transparent;
}

.hideDiv {
    display : none !important;
}

.departschedule_calendar a[style*="grid-area"],
.departschedule_calendar .form-group[style*="grid-area"] {
}

.departschedule_calendar.departschedule_update .form-group {
    border        : unset;
    border-radius : unset;
}

.departschedule_calendar.departschedule_update .form-group:hover {
    transform    : none !important;
    box-shadow   : none !important;
    border-color : #dee2e6 !important;
}

.departschedule_calendar.departschedule_update a .form-group {
    background   : white !important;
    border-color : #dee2e6 !important;
    color        : #333 !important;
    font-weight  : 500 !important;
}

.departschedule_calendar.departschedule_update a:hover .form-group {
    background   : white !important;
    transform    : none !important;
    box-shadow   : none !important;
    border-color : #dee2e6 !important;
}

.departschedule_calendar input[name$="-year"],
.departschedule_calendar input[name$="-month"],
.departschedule_calendar div[id*="-year"],
.departschedule_calendar div[id*="-month"] {
    display: none !important;
}

/*************PATHFINDERS REPORT*************/
.report-search{
    max-width : 60rem;
    margin    : 0 auto;
}
.report-table td{
    max-width : 5rem;
    min-width : 3rem;
}

.report-results th,
.report-table th{
    color : var(--colour-offwhite);
}
.report-search table{
    margin : auto;
}
.report-search .search-item-heading{
    background     : var(--colour-dark-gray);
    color          : var(--colour-offwhite);
    font-weight    : bold;
    font-size      : 10px;
    border-right   : 1px solid var(--colour-offwhite);
    border-bottom  : 1px solid var(--colour-offwhite);
    padding        : 1px 5px;
    width          : 100%;
    text-transform : uppercase;
    text-align     : center;
}
.report-results thead{
    background-color : var(--colour-dark-gray);
}
.faulty{
    color : #d0c9c9;
}

td.table-cell{
    width : 5rem;
}

#own-arrangements input.form-control {
    height    : 20px;
    font-size : 10px;
}
#canx-pol-display legend,
#canx-pol-display .legend{
    background-color : var(--colour-base);
}
/*************END PATHFINDERS REPORT*************/

/*************TRANSFER SEND*************/

.transfersend input {
    margin-right : 6px;
}
.transfersend input[name="idate_date_from_yy"] {
    margin-right : 20px;
}
/*************END TRANSFER SEND*************/

/*************ACCOMMODATION SEND*************/

.accommodationsend #div_id_idate_date_from_dd:before {
    content   : 'From:';
    position  : absolute;
    font-size : 10px;
    top       : -20px;
}
.accommodationsend label {;
    font-size : 10px;
}
.accommodationsend .form-check {
    margin-right : 20px;
}
.accommodationsend input {
    margin-right : 6px;
}
.accommodationsend input[name="idate_date_from_yy"] {
    margin-right : 20px;
}
.accommodationsendpadding,
.transfersendpadding {
    padding : 5px 21px;
}
/*************ACCOMMODATION SEND*************/

/******MEMBER USER GROUPS******/

.member-list-section {
    width  : 350px;
    margin : auto;
    border : 2px solid var(--colour-base);
}
.member-list {
    margin-top : 20px;
    width      : 350px;
    flex-wrap  : wrap;
    padding    : 0 20px;
}
.member-list input[type="checkbox"] {
    margin : 0 5px;
}
.member-list select[id$="code_user"] {
    margin-left : 20px;
    width       : 220px;
}
.text-member {
    opacity               : 0.8;
    font-weight           : bold;
    font-size             : 8px;
    background            : var(--colour-green);
    color                 : var(--colour-offwhite);
    position              : absolute;
    left                  : -29px;
    bottom                : 50px;
    padding               : 2px 9px;
    -webkit-transform     : rotate(-90deg);
    -moz-transform        : rotate(-90deg);
    -ms-transform         : rotate(-90deg);
    -o-transform          : rotate(-90deg);
    -webkit-border-radius : 10px 10px 0 0;
    -moz-border-radius    : 10px 10px 0 0;
    border-radius         : 10px 10px 0 0;
}
.member-list-name {
    flex-wrap : wrap;
    display   : flex;
    width     : 1200px;
}

/******END MEMBER USER GROUPS******/

/************* PACKAGES **************/
#packagedetailForm #div_id_pickup_time_mm {
    margin-top  : 10px;
    margin-left : -30px;
}
.package-itin-sort table td,
.update-package-table table td {
    border : none;
}
.package-itin-sort tr,
.update-package-table tr  {
    background : white;
    border     : 1px solid #dee2e6;
    cursor     : pointer;
}
/*************END PACKAGES **************/

/*************** ACCOMMODATION LIST ***************/
#accommodation-list{
    width : 100%;
}
#accommodation-list li.list-group-item.list-group-item-action{
    padding : 5px;
}

#accommodation-search{
    width : 15rem;
}
#accommodation-results .radio,
#tour-results .radio,
#transfer-results .radio{
    height : 15px;
    width  : 15px;
}
/***************END ACCOMMODATION LIST ***************/

/*************** ITEM REPORT ***************/
#item-report .form-group-container legend,
#item-report .form-group-container .legend{
    margin-right : -15px;
}

#item-report .small-col{
    width : 50px;
}
#item-report table tr td{
    max-width : 100px;
}
#item-report .select2-container{
    display         : flex;
    justify-content : space-between;
    flex-direction  : column;
}
#item-report .select2-container input{
    flex-direction : column;
}
#staff-report .div_id_i_datetype div,
#top-items-report .div_id_i_datetype div,
#item-report .div_id_i_datetype div {
    display         : flex;
    justify-content : center;
}
div#top-items-report {
    width  : 40%;
    margin : 0 auto;
}
#top-items-report .table th{
    width : 20%;
}

#item-report thead {
    position : sticky;
    top      : -2px;
}

#item-report thead th {
    border-top : 1px solid #dee2e6;
}

.l-50{
    width : 50%;
}
#book-search p {
    margin-top    : 0;
    margin-bottom : 2px;
    color         : var(--colour-gray);
    font-size     : 11px;
}
/***************END ITEM REPORT ***************/

/*************** END EMAIL CREATE ***************/

.email-box {
    border           : 2px solid var(--colour-light-gray);
    background-color : var(--colour-xlight-gray);
}

.cke_top {
    padding : 0 !important;
}

.email-view{
    margin : 0 auto 50px auto;
}

@media only screen and (min-width: 768px) {
    .email-create div#cke_1_contents {
        height : 270px!important;
    }

    .email-view div#cke_1_contents {
        height : 270px!important;
    }

}

@media only screen and (min-width: 992px) {
    .email-create div#cke_1_contents {
        height : 360px!important;
    }

    .email-view div#cke_1_contents {
        height : 270px!important;
    }
}

@media only screen and (min-width: 1201px) {
    .email-create div#cke_1_contents {
        height : 435px!important;
    }

    .email-view div#cke_1_contents {
        height : 350px!important;
    }
}

@media only screen and (min-width: 1601px) {
    .email-create div#cke_1_contents {
        height : 520px!important;
    }

    .email-view div#cke_1_contents {
        height : 420px!important;
    }
}

/*************** END EMAIL CREATE ***************/

/***************Work Flows ***************/
#workflow-tabs li a:hover, #workflow-tabs li a.current{
    background-color : var(--colour-base);
    color            : var(--colour-dark-gray);
    font-weight      : bold;
}
#workflow-tabs .nav-item a{
    min-width : 6rem;
}
#workflow-table a, .workflow-emails a{
    color : #d9dbf3;
    fill  : #d9dbf3;

}
#workflow-table a:hover{
    color : blue;
    fill  : blue;
}
#workflow-table th,
#email-pending th{
    background-color : var(--colour-base);
}
#workflow-tabs,
#workflow-table,
#email-pending{
    width  : 80%;
    margin : 0 auto;
}

#workflow span.group-name {
    cursor : pointer;
}
#workflow span.group-name:hover, #workflow span.group-name.active {
    color : var(--colour-dark-blue);
}

.workflow.card .no-outline:focus {
    outline : 0 !important;
}

/***************END Work Flows ***************/


/******************* BANK TRANS*********************/
#bank-trans span.legend {
    width      : 100%;
    text-align : center;
}
#bank-trans .date-field{
    width : 40px;
}
#bank-trans .select-field{
    width : 70px;
}

#bank-trans .debitSearch:not(:empty) {
    border-top       : unset;
    background-color : var(--colour-base);
    width            : 300px;
    margin           : -16px 120px;
    border-radius    : 0.10rem;
    text-align       : center;
}
#bank-trans .creditSearch:not(:empty) {
    border-top       : unset;
    background-color : var(--colour-base);
    width            : 300px;
    margin           : -15px 0 0 282px;
    border-radius    : 0.10rem;
    text-align       : center;
}

#bank-trans .autosuggest_list ul a li:hover {
    background-color : var(--colour-base);
    border-left      : 3px solid var(--colour-seagreen);
}

#bank-account-trans{
    width  : 80%;
    margin : 0 auto;
}

#bank-account-trans .was-validated .form-control:invalid, .form-control.is-invalid {
    border           : 1px solid var(--colour-light-gray);
    padding-right    : unset;
    background-image : unset;
}
#bank-account-trans .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border     : 1px solid var(--colour-light-gray);
    box-shadow : unset;
}
#bank-account-trans .invalid-feedback{
    display : none;
}
#si-search input#id_ibookref,
#si-search input#id_iinvoice_id,
#si-search input#id_iagent_txt{
    width : 8rem;
}
#si-create-adhoc .select2-container {
    min-width : 200px;
    max-width : 200px;
}
.acc-search button{
    margin-right : 90px;
    margin-top   : -43px;
    float        : right;
}
.acc-search a button{
    float  : right;
    margin : -43px 1rem 1rem 1rem;
}
#bank-account-create .col-form-label,
#bank-account-update .col-form-label{
    min-width : 150px;
}
/*******************END BANK TRANS*********************/


/******************USER-AUTH******************/
.user-page#id_type {
    background : white;
    border     : 1px solid var(--colour-base);
}

.user-auth{
    display         : flex;
    justify-content : center;
    margin          : 0 auto;
    width           : 31rem;
    margin-top      : 50px;
}
div.date-field{
    display : flex;
}

.user-auth .auth-color {
    background : var(--colour-dark-blue);
    padding    : 7px 0;
}

.user-auth .auth-color-followme2africa {
    background : var(--colour-mustard-yellow);
    padding    : 7px 0;
}

.user-auth .auth-color-springbokatlas {
    background : var(--colour-light-brown);
    padding    : 7px 0;
}

.user-auth .auth-color-thompsonsafrica {
    background : #153147;
    padding    : 7px 0;
}

.user-auth .alert-block {
    position : absolute;
    top      : -30px;
    left     : 0;
}

.user-auth svg{
    height  : 3rem;
    fill    : var(--colour-offwhite);
    width   : 3rem;
    padding : 10px;
}
.user-auth fieldset{
    box-shadow    : none;
    padding-top   : 2rem;
    margin-bottom : 0;
}
.user-auth form{
    background-color : white;
    padding          : 1rem;
    border           : 1px solid var(--colour-base);
    width            : 100%;
}
.user-auth p {
    display : flex;
}
.user-auth h5{
    color : #83898c;
}
.user-auth #user-registration{
    border : none;
}
.user-auth #user-registration .form-group{
    margin-bottom : 8px;
}

.user-auth .user-btn .btn{
    margin-bottom : 2rem;
}
.user-auth .btn:hover{
    background-color : var(--colour-base);
    color            : var(--colour-gray);
    border           : 1px solid var(--colour-base);
    transition       : 0.5s;
}

#logout-message{
    display     : flex;
    align-items : baseline;
}
#logout-message svg{
    height : 18px;
    width  : 18px;
}
#logout-message h4{
    padding-left : 20px;
}
#div_id_res_level div,
#div_id_grp_level div,
#div_id_prd_level div,
#div_id_acc_level div,
#div_id_it_level  div,
#div_id_hot_level div,
#div_id_agt_level div,
#div_id_ad_level  div,
#div_id_tpw_level div,
#div_id_iss_level div,
#div_id_sup_level div,
#div_id_cot_level div,
#div_id_trf_level div,
#div_id_trc_level div,
#div_id_rsc_level div{
    display : flex;
}
#div_id_res_level .form-check-label,
#div_id_grp_level .form-check-label,
#div_id_prd_level .form-check-label,
#div_id_acc_level .form-check-label,
#div_id_it_level  .form-check-label,
#div_id_hot_level .form-check-label,
#div_id_agt_level .form-check-label,
#div_id_ad_level  .form-check-label,
#div_id_tpw_level .form-check-label,
#div_id_iss_level .form-check-label,
#div_id_sup_level .form-check-label,
#div_id_cot_level .form-check-label,
#div_id_trf_level .form-check-label,
#div_id_trc_level .form-check-label,
#div_id_rsc_level .form-check-label{
    width : 15px !important;
}
#new-user #div_id_is_active input[name="is_active"]{
    position : absolute;
    width    : 280px;
}
.password_change_form {
    display            : block;
    margin             : auto;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}
.password_change_form #hint_id_new_password1 {
    display : none;
}
.password_change_form .form-group,
.password_reset_form .form-group {
    display : block;
}
#div_id_is_active input {
    width : 15px;
}
.add_new_user #div_id_idatejoined_dd div {
    width : 33px;
}
/******************END USER-AUTH******************/

/******************DUAL CHECK******************/

.dualcheckdetails th, .dualcheckdetails td {
    padding-top    : 1px;
    padding-bottom : 1px;
    white-space    : normal !important;
}

.dualcheckdetails th {
    border-top : transparent !important;
}
.dualgreen {
    color      : #155724;
    background : #d4edda;
}
.dualred, tr.dualred td {
    color      : #721c24;
    background : #f8d7da;
}
.partialmatch-table th,
.partialmatch-table td {
    white-space    : unset !important;
    vertical-align : top !important;
}
/******************END DUAL CHECK******************/

/************STAFF REPORT PAGE************/

#staff-report .nav-tabs .nav-link.active{
    margin-right : 2px;
}
#staff-report .childshow svg {
    position           : absolute;
    margin-left        : 11%;
    margin-top         : -25px;
    -webkit-transition : all 0.2s;
    -moz-transition    : all 0.2s;
    -ms-transition     : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
    fill               : var(--colour-dark-gray);
}
.staff-heading{
    font-weight    : bolder;
    text-transform : uppercase;
    margin-left    : 20px;
    color          : #262f33;
}
.staff-heading table thead th{
    width : 250px;
}
.staff-booking-table{
    width  : 90%;
    margin : 0 auto;
}
.sub-report-heading{
    background-color : #cce5ff;
}
.table-min-1200{
    min-width : 1200px;
}
.form-field-sm{
    display          : block;
    width            : 100%;
    color            : #495057;
    padding-left     : 5px;
    background-color : var(--colour-xlight-gray);
    background-clip  : padding-box;
    border           : 1px solid var(--colour-light-gray);
    border-radius    : 0.25rem;
    transition       : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.th-medium{
    min-width : 85px!important;
    max-width : 85px!important;
}

.th-large{
    min-width : 150px!important;
    max-width : 150px!important;
}
/************END PRICE AUDIT SEARCH PAGE************/


/************SELECT2 OVERWRITES************/
#aged-debtors-form .select2-container{
    min-width : unset;
}

.select2-container--default .select2-selection--single {
    border : 1px solid var(--colour-light-gray)!important;
}
#div_id_idebit .select2-container,
#div_id_icredit .select2-container {
    min-width : auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    right : 5px !important;
}
.add-nominal-code .select2-container {
    width : 367px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height : 22px !important;
}
#cheque-create span.select2.select2-container.select2-container--default{
    width : 200px!important;
}
#cheque-create .select2-container{
    min-width : unset;
}
.edit-btn .dark-blue svg,
#cheque-view .dark-gray svg{
    position    : unset;
    left        : unset;
    font-size   : 11px;
    font-weight : bold;
}
#cheque-view a.dark-gray {
    font-size   : 11px!important;
    font-weight : bold;
    color       : var(--colour-dark-gray);
}
#cheque-view a.dark-gray:hover {
    font-size   : 11px!important;
    font-weight : bold;
    color       : var(--colour-dark-blue);
}
#bookingdept-update .select2-container--default .select2-selection--single,
#bookingdept-create .select2-container--default .select2-selection--single {
    width : calc(100% - 5px)!important;
}
#create-booking-fieldset .select2-container {
    min-width : unset;
    width     : 100%!important;
}
#suppliers-report .select2-container {
    min-width : unset;
    max-width : 200px!important;
}
#supplier-create input#id_name,
#supplier-create select#id_code_supplier_group {
    width : 256px;
}
#predepartures .select2-container{
    min-width : unset;
    width     : 220px!important;
}
#div_id_idebit .select2-container,
#div_id_icredit .select2-container,
#adhoc .select2-container {
    min-width : unset;
    width     : 237px!important;
}
.select2-container .select2-selection--single {
    height : 27px !important;
}
#predepartures label.form-check-label {
    display        : flex;
    flex-direction : row-reverse;
}
#touritem span.select2-selection__clear {
    display : none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    height      : 24px !important;
    white-space : initial !important;
}
/************END SELECT2 OVERWRITES************/

/************HOTEL XLS TARIFFS************/

.hotel-xls #div_id_iradio_feat.form-group div {
    display : flex;
}

.hotel-xls label.col-form-label,
.tour-xls label.col-form-label,
.transfer-xls label.col-form-label
{
    background     : var(--colour-base);
    font-weight    : bold;
    font-size      : 10px;
    border-right   : 1px solid var(--colour-offwhite);
    border-bottom  : 1px solid var(--colour-offwhite);
    padding        : 0 5px;
    width          : 100%;
    text-transform : uppercase;
    text-align     : center;
}
.hotel-xls label[for="id_iradio_feat_0"] + div,
.hotel-xls label[for="id_iradio_xls_structure_0"] + div{
    display : flex;
}
.comp_graph_radios .comp_graph_check {
    position : relative;
}
.comp_graph_check input{
    visibility : hidden;
    position   : absolute;
}
.comp_graph_check label:hover{
    cursor : pointer;
}
.comp_graph_check label {
    font-size : 12px;
    border    : 1px solid var(--colour-light-blue);
}

.comp_graph_check input:checked + label{
    background-color : var(--colour-light-blue);
}

/************XLS TARIFFS************/

/************DRAG ITEMS************/
.drag_table {
    overflow-x : scroll;
}
.move-icon {
    cursor : move;
}

.drag_table.active {
    cursor : grabbing;
}
/************XLS TARIFFS************/


/************CSV  & XLSX CREATE PAGE************/

.csv_create {
    width         : 600px;
    padding-right : 100px;
}
.csv_create #div_id_agents_option div {
    display      : flex;
    padding-left : 0;
}
.csv_create #div_id_agents_option div .form-check-label {
    white-space   : nowrap;
    padding-right : 10px;
}
.csv_create #div_id_agents_option input[type="radio"] {
    position : absolute;
    top      : -6px;
}

.csv_create #div_id_suppliers_option div {
    display : flex;
}
.csv_create #div_id_suppliers_option div .form-check-label {
    white-space   : nowrap;
    padding-right : 10px;
}
.csv_create #div_id_suppliers_option input[type="radio"] {
    position : absolute;
    top      : -6px;
}
/************END CSV & XLSX CREATE PAGE************/


/*********************** PLACES ***********************/

.map-link {
    position      : absolute;
    right         : -25px;
    margin-top    : -13px;
    padding       : 2px;
    border        : 1px solid var(--colour-light-gray);
    border-left   : none !important;
    border-radius : 0 3px 3px 0;
}
.map-link2 {
    padding    : 3px;
    margin-top : -4px;
}
.map-link svg, .map-link2 svg {
    fill   : var(--colour-gray);
    margin : 0 !important;
}
.map-link:hover,.map-link2:hover  {
    background : var(--colour-light-gray);
}
.map-link:hover svg, .map-link2:hover svg {
    fill : var(--colour-offwhite);
}
/*********************** END PLACES ***********************/

/*********************** PRODUCTS TAGS AND GROUPS  ***********************/

.productsagsgroups-list-section {
    width  : 600px;
    margin : auto;
    border : 2px solid var(--colour-base);
}
.productsagsgroups-list {
    margin-top : 20px;
    width      : 600px;
    flex-wrap  : wrap;
    padding    : 0 20px;
}
.productsagsgroups-new {
    opacity               : 0.8;
    font-weight           : bold;
    font-size             : 8px;
    background            : var(--colour-green);
    color                 : var(--colour-offwhite);
    position              : absolute;
    left                  : -25px;
    bottom                : 49px;
    padding               : 2px 5px;
    -webkit-transform     : rotate(-90deg);
    -moz-transform        : rotate(-90deg);
    -ms-transform         : rotate(-90deg);
    -o-transform          : rotate(-90deg);
    -webkit-border-radius : 10px 10px 0 0;
    -moz-border-radius    : 10px 10px 0 0;
    border-radius         : 10px 10px 0 0;
}
.productsagsgroups-list div[id$=is_deleted] {
    margin : 5px;
    width  : 40px;
}
.productsagsgroups-list div[id$=name] {
    width : 450px;
}
.productsagsgroups-list div[id$=weight] {
    margin-left : 10px;
    width       : 50px;
}
.productsagsgroups-list input[id$=weight] {
    text-align : center;
}

.producttagmodal {
    max-height : 50vh;
    overflow-y : auto;
}
#myTable{
    width  : 100%;
    border : 1px solid var(--colour-light-base);
}
#mylist {
    background-position : 10px 10px;
    background-repeat   : no-repeat;
    width               : 100%;
    border              : 1px solid #ddd;
    margin-bottom       : 12px;
}

/*********************** END PRODUCTS TAGS AND GROUPS ***********************/

/*********************** TRAVELPOWER ***********************/

.blue-block {
    border : 2px solid var(--colour-base);
}
.products-tags-styling {
    line-height   : 2.5;
    font-size     : 9px;
    padding       : 3px;
    border-radius : 5px;
    background    : var(--colour-light-blue);
    border        : 1px solid var(--colour-base);
    white-space   : nowrap;
}
.travelpower-dialogue-run form {
    position : relative;
}
.travelpower-list div[id$=is_deleted] {
    margin : 5px;
    width  : 40px;
}

/*********************** END TRAVELPOWER ***********************/

/*********************** TRAVELPOWER BULKUPDATE ***********************/

.travelpower-list {
    margin-top : 20px;
    width      : auto;
    flex-wrap  : wrap;
    padding    : 0 20px;
}
.travelpower-new {
    opacity               : 0.8;
    font-weight           : bold;
    font-size             : 8px;
    background            : var(--colour-green);
    color                 : var(--colour-offwhite);
    position              : absolute;
    left                  : -25px;
    bottom                : 47px;
    padding               : 2px 5px;
    -webkit-transform     : rotate(-90deg);
    -moz-transform        : rotate(-90deg);
    -ms-transform         : rotate(-90deg);
    -o-transform          : rotate(-90deg);
    -webkit-border-radius : 10px 10px 0 0;
    -moz-border-radius    : 10px 10px 0 0;
    border-radius         : 10px 10px 0 0;
}
.travelpower-list div[id$=is_deleted] {
    margin : 5px;
    width  : 40px;
}
.travelpower-list div[id$=question] {
    width : 685px;
}
.travelpower-list div[id$=dialogue] {
    width : 405px;
}
.travelpower-list div[id$=code_answer_type] {
    margin-left : 10px;
    width       : 90px;
}
.travelpower-list div[id$=answer] {
    margin-left : 10px;
    width       : 460px;
}
.travelpower-list div[id$=question_next] {
    margin-left : 10px;
    width       : 460px;
}
.travelpower-list div[id$=code_answer_field_type] {
    margin-left : 10px;
    width       : 155px;
}
/*********************** END TRAVELPOWER BULKUPDATE ***********************/

/*********************** MPQ GENERAL ***********************/

.modal-dialog.paxconfig-modal {
    min-width : 360px;
    max-width : 360px;
}

.mpqitem_list  {
    overflow-x : auto;
}
.mpqitem_list details  {
    border    : none !important;
    font-size : 11px;
}
.mpqitem_list div {
    font-size : 11px;
    /*padding: 3px;*/
}
.mpqitem_heading {
    padding          : 0 !important;
    color            : var(--colour-dark-gray);
    background-color : var(--colour-xlight-gray);
    border-color     : var(--colour-light-gray);
}
.mpqitem_heading div {
    font-size   : 11px !important;
    font-weight : bold;
    padding     : 3px;
}
.mpqitem_list .gray-text div,
.mpqitem_list .gray-text div a {
    color : var(--colour-dark-gray);
}

#quote-search-btn {
    background  : 0;
    border      : none;
    margin-left : -30px;
}
#quote-search-btn:focus {
    outline : none;
}
.itemslist_totals div {
    font-weight : bold;
}
.process-animation-block {
    display : none;
}
.process-animation {
    top                        : 4px;
    width                      : 20px;
    height                     : 20px;
    animation-name             : processing;
    animation-duration         : 1.5s;
    animation-timing-function  : linear;
    animation-iteration-count  : infinite;
    -webkit-animation-name     : processing; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration : 1.5s; /* Safari 4.0 - 8.0 */
}
.process-animation svg {
    margin : 0;
    width  : 20px;
    height : 20px;
    fill   : rgba(0,0,0,0.3);
}

@-webkit-keyframes processing {
    from {transform : rotate(0deg);}
    to {transform : rotate(360deg);}
}

@keyframes processing {
    from {transform : rotate(0deg);}
    to {transform : rotate(360deg);}
}
.process-animation-text {
    font-size : 13px;
    padding   : 8px 2px;
}
.mpq_freeze {
    overflow   : auto;
    max-height : calc(100vh - 380px);
    width      : fit-content;
}
/*********************** END MPQ GENERAL ***********************/

/*********************** MPQ PAX RANGES ***********************/

.quotepaxranges-update label.form-check-label {
    min-width  : 73px;
    max-width  : 73px;
    text-align : left;
}
.quotepaxranges-update input.numberinput{
    min-width    : 63px;
    max-width    : 63px;
    margin-right : 10px;
}

.quotepaxranges-update th{
    min-width : 73px;
    max-width : 73px;
    padding   : 4px;
}
.quotepaxranges-update .formColumn{
    min-width : 73px;
    max-width : 73px;
}
.quotepaxranges-update .modal-box table{
    width : unset;
}
.quotepaxranges-update svg{
    height : 10px;
    width  : 10px;
}
.quotepaxranges-update .add-more{
    border-radius : 100%!important;
}
.quotepaxranges-update button:focus {
    outline : none;
}
.quotepaxranges-update button#add_more {
    height  : 30px;
    padding : 2px 8px;
}
/*********************** END MPQ PAX RANGES ***********************/


/*********************** ADJ FOREX CHEQUE ***********************/

.forex-chq #div_id_ishow_working {
    padding : 5px 7px !important;
}

/*********************** END ADJ FOREX CHEQUE ***********************/

/*********************** SUPPLIER PROPDATA ***********************/

.supplier_propdata_error h6{
    text-align     : center;
    color          : orangered;
    padding-bottom : 5px;
}

.supplier_data_status input[type="radio"] {
    margin         : 0 5px;
    vertical-align : middle;
}

#div_id_supplier_data_status div:first-child {
    display : flex;
}

#imageuploadform div.img-gallery {
    margin     : 1em 0;
    text-align : center;
}

#imageuploadform div.gallery img {
    width      : 20vw;
    height     : 20vw;
    object-fit : cover;
}
/*********************** END SUPPLIER PROPDATA ***********************/

/*********************** POPUP MESSAGE ***********************/
.popup-message .confirm {
    position      : fixed;
    top           : 100px;
    background    : white;
    padding       : 20px;
    border-radius : 5px;
    z-index       : 1000;
    box-shadow    : 0 2px 10px -5px #1f2029;
}

.verif-envelope {
    padding : 5px;
    color   : orange;
}
/*********************** END POPUP MESSAGE ***********************/


/*********************** MPQ CREATE BOOKING ***********************/

.option-tabs {
    overflow-x : auto;
}

.option-tabs .nav {
    white-space : nowrap;
    display     : flex;
    flex-wrap   : nowrap;
}

/*********************** END MPQ CREATE BOOKING ***********************/


/*********************** MPB SEARCH ***********************/
#booking-search legend {
    margin-bottom : 10px!important;
}

#booking-search-btn {
    background  : 0;
    border      : none;
    margin-left : -30px;
}
#booking-search-btn:focus {
    outline : none;
}
#mpb-transfer-search-popup input#ipickup_time_hh {
    margin-top : -22px;
}
/*********************** END MPB SEARCH ***********************/


/*********************** MPQ SUPPLIER CONFIRMATION ***********************/

.table.mpq_supplier_confirmation td {
    vertical-align : top !important;
}

/*********************** END MPQ SUPPLIER CONFIRMATION ***********************/

/*********************** SUPPLIER DETAILS NOTE ***********************/

.supplier-tooltip {
    position : relative;
    display  : inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltip-table-300 {
  width : 300px;
}

.tooltip-table-500 {
  width : 500px;
}

.tooltip-table tr td,
.tooltip-table-300 tr td,
.tooltip-table-500 tr td{
  color : white;
}

.supplier-tooltip .tooltiptext {
    visibility       : hidden;
    width            : 100px;
    background-color : black;
    color            : white;
    text-align       : center;
    border-radius    : 6px;
    padding          : 5px 0;
    position         : absolute;
    z-index          : 1;
    bottom           : 150%;
    left             : 50%;
    margin-left      : -60px;
}

.supplier-tooltip .tooltiptext::after {
    /*content: "";*/
    position     : absolute;
    width        : 100px;
    top          : 100%;
    left         : 50%;
    color        : white;
    margin-left  : -5px;
    border-width : 5px;
    border-style : solid;
    border-color : black transparent transparent transparent;
}

.supplier-tooltip:hover .tooltiptext {
    visibility : visible;
}

/*********************** END SUPPLIER DETAILS NOTE ***********************/

/*********************** DATE FORMATTING - COMPANY PREFERENCE ***********/
.date-pos-0 {
    order : 0;
}
.date-pos-1 {
    order : 1;
}
.date-pos-2 {
    order : 2;
}
.date-pos-3 {
    order : 3;
}
.date-pos-4 {
    order : 4;
}
.date-pos-5 {
    order : 5;
}
.date-pos-6 {
    order : 6;
}
/*****************END DATE FORMATTING - COMPANY PREFERENCE **************/

/*********************** CALENDAR FORMATTING - COMPANY PREFERENCE ***********/
.calendar-icon{
    width    : 12px;
    height   : 12px;
    position : relative;
    margin   : 5px;
    top      : -14px;
    left     : -13px;
}

.calendar-table{
    margin-top : 13px;
    /*height    : 150px;*/
}

.calendar-table td {
    padding     : 1px;
    white-space : nowrap;
}

/*********************** END CALENDAR FORMATTING - COMPANY PREFERENCE ***********/

/*********************** MPB BOOKING NAMES ***********/

#booking-mpb-names td {
    background     : var(--colour-light-gray);
    text-align     : center;
    text-transform : uppercase;
    border-right   : 1px solid var(--colour-offwhite);
    border-top     : 5px solid var(--colour-offwhite);
    font-size      : 10px;
    font-weight    : bold;
}

.booking-mpb-names input[name$="is_deleted"] {
    width  : 15px;
    margin : 0 55px 15px 55px;
}

.booking-mpb-names label[for$="is_deleted"] {
    width       : 45px;
    white-space : nowrap;
    margin-left : -30px;
}

.booking-mpb-names input[name$="note"], .booking-mpb-names input[name$="passport_no"] {
    width        : 196px;
    margin-right : 1px;
}

.booking-mpb-names input[name$="first_name"], .booking-mpb-names input[name$="surname"] {
    width        : 190px;
    margin-right : 1px;
}

.booking-mpb-names select[name$="title"] {
    width        : 62px;
    margin-left  : 50px;
    margin-right : 1px;
    padding      : 1px 2px
}

.booking-mpb-names select[name$="type"] {
    width        : 93px;
    margin-right : 1px;
    padding      : 1px 2px
}

.booking-mpb-names input[name$="age"] {
    width        : 43px;
    margin-right : 1px;
}

.booking-mpb-names select[name$="config"] {
    width        : 63px;
    margin-right : 1px;
    padding      : 1px 2px
}

.booking-mpb-names input[name$="room"] {
    width        : 40px;
    margin-right : 1px;
}

/* ALPINE MODAL */
.alpine-modal-wrapper {
    display          : flex;
    justify-content  : center;
    align-items      : flex-start;
    padding          : 5%;
    position         : fixed;
    inset            : 0;
    background-color : rgba(0, 0, 0, 0.4);
    z-index          : 1000;
    overflow-y       : scroll;
}

.alpine-modal {
    opacity          : 1;
    background-color : white;
    border-radius    : 5px;
    padding          : 10px;
}

.alpine-modal-header {
    display          : flex;
    justify-content  : space-between;
    align-items      : center;
    background-color : lightgrey;
    padding          : 10px;
    border-radius    : 5px;
    margin-bottom    : 10px;
    gap              : 20px;
    cursor           : move;
}

.alpine-modal-content{
    max-width : 97vw;
}

.alpine-modal-header-title {
    text-transform : capitalize;
    font-weight    : bold;
    font-size      : 15px;
}

/* ALPINE MODAL END */

/* SQUARE LOADERS */

/* --- Small --- */

.spinner-square-sm {
    display        : inline-flex;
    flex-direction : row;
    width          : 9px;
    height         : 12px;
}

.spinner-square-sm > .square {
    width         : 1.7px;
    height        : 8px;
    margin        : auto auto;
    border-radius : 2px;
}

.square-1-sm {
    animation : square-anim-sm 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2-sm {
    animation : square-anim-sm 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3-sm {
    animation : square-anim-sm 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim-sm {
    0%, 100% {
        height           : 8px;
        background-color : rgb(111, 163, 240);
    }
    25% {
        height : 8px;
    }
    50% {
        height           : 12px;
        background-color : rgb(111, 200, 240);
    }
    75% {
        height : 8px;
    }
}

/* --- End Small --- */

/* --- Medium --- */

.spinner-square-md {
    display        : flex;
    flex-direction : row;
    width          : 45px;
    height         : 60px;
}

.spinner-square-md > .square {
    width         : 9px;
    height        : 40px;
    margin        : auto auto;
    border-radius : 2px;
}

.square-1-md {
    animation : square-anim-md 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2-md {
    animation : square-anim-md 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3-md {
    animation : square-anim-md 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim-md {
    0%, 100% {
        height           : 40px;
        background-color : rgb(111, 163, 240);
    }
    25% {
        height : 40px;
    }
    50% {
        height           : 60px;
        background-color : rgb(111, 200, 240);
    }
    75% {
        height : 40px;
    }
}

/* --- End Large --- */

/* --- Large --- */

.spinner-square-lg {
    display        : flex;
    flex-direction : row;
    width          : 90px;
    height         : 120px;
}

.spinner-square-lg > .square {
    width         : 17px;
    height        : 80px;
    margin        : auto auto;
    border-radius : 4px;
}

.square-1-lg {
    animation : square-anim-lg 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}

.square-2-lg {
    animation : square-anim-lg 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}

.square-3-lg {
    animation : square-anim-lg 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}

@keyframes square-anim-lg {
    0% {
        height           : 80px;
        background-color : rgb(111, 163, 240);
    }
    20% {
        height : 80px;
    }
    40% {
        height           : 120px;
        background-color : rgb(111, 200, 240);
    }
    80% {
        height : 80px;
    }
    100% {
        height           : 80px;
        background-color : rgb(111, 163, 240);
    }
}

/* --- End Large --- */

/*********************** END MPB BOOKING NAMES ***********/


/* START FLIGHT CARRIER TARIFF */

.extra-day-input {
    background-color : var(--colour-xlight-gray) !important;
    border           : 1px solid var(--colour-xlight-gray) !important;
}

.extra-day-update-input {
    background-color : white !important;
    border           : 1px solid white !important;
}

/* END FLIGHT CARRIER TARIFF */


/*********************** START EMAIL ATTACHMENT REMOVE ***********/

#attachment-list {
    display        : flex;
    flex-direction : column; /* Align items in a column */
}
.remove-file {
    color      : red;
    font-size  : 0.8em;
    border     : none;
    background : none;
    cursor     : pointer;
}

#selected-files-container p {
    margin-left   : 10px;
    margin-bottom : 10px;
    font-weight   : bold;
}

#selected-files-container li {
    margin-left   : 10px;
    margin-bottom : 10px;
  }

.remove-all-files {
    margin-left   : 10px;
    margin-bottom : 15px;
  }

.attachment-item {
        display     : flex;
        align-items : center;
}

.attachment-item a {
        margin-right : 10px;
        margin-left  : 10px;
}

/*********************** END EMAIL ATTACHMENT REMOVE ***********/

/*********************** START ITEM PAYMENT REFUND ***********/

    .claim-group {
        display     : flex;
        align-items : center;
        position    : relative;
    }

    .claim-button {
        margin-right : 10px;
    }

    .reference-wrapper {
        position : absolute;
        top      : 100%;
        left     : 0;
        z-index  : 2; /* Increase this value */
        width    : 100%;
    }

/*********************** END ITEM PAYMENT REFUND ***********/

.api-special-offer {
    color         : #007bff;
    background    : #b5cde3;
    border-radius : 6px;
    border        : 1px solid white;
    font-size     : 9px;
    padding       : 2px 6px 2px 6px;
    margin-left   : 20px
}

/* Allows you to select a row in a table you don't want the hover affect on */
.table-hover > tbody > tr.no-hover:hover
{
    color            : inherit;
    background-color : inherit;
}

/*********************** START GOOGLE TOOLTIP ***********/

.google-tooltip-trigger {
    cursor          : pointer;
    text-decoration : none;
    color           : blue;
}
.google-tooltip-content {
    display          : none;
    position         : fixed;
    background-color : #f9f9f9;
    border           : 1px solid #ccc;
    padding          : 10px 10px 10px 20px;
    z-index          : 1000;
    min-width        : 160px;
    box-shadow       : 0 2px 5px rgba(0,0,0,0.2);
}
.google-tooltip-content a {
    display         : block;
    margin-bottom   : 5px;
    color           : #333;
    text-decoration : none;
}
.google-tooltip-content a:hover {
    text-decoration : underline;
}

/*********************** END GOOGLE TOOLTIP ***********/

/*********************** HIDDEN FIELD ***********/

.hidden-input {
    display : none;
}

/*********************** END HIDDEN FIELD ***********/

.inventory-rateplan-select {
    display    : inline-block;
    width      : 30%;
    margin     : 5px;
    text-align : center;
}

/*********************** FLYSAFAIR FLIGHT SEARCH ***********/

.greyed-out {
    opacity          : 0.5;
    pointer-events   : none;
    background-color : var(--colour-light-gray);
}

input[name='flight_input']:disabled {
    pointer-events : none;
    cursor         : not-allowed;
}

/*********************** END FLYSAFAIR FLIGHT SEARCH ***********/

/*********************** ALLOCATION USAGE REPORT ***********/

.table-wrapper {
    display     : flex;
    align-items : flex-start;
}

.scrollable-container {
    overflow-x : auto;
    width      : 100%;
}

.alloc-static-table {
    border-collapse : collapse;
    width           : auto;
}

.alloc-static-table th, .alloc-static-table td {
    border     : 1px solid #b5cde3;
    padding    : 3px 3px 3px 10px;
    text-align : left;
}

.alloc-data-table {
    border-collapse : collapse;
    width           : 100%;
}

.alloc-data-table th, .alloc-data-table td {
    border     : 1px solid #b5cde3;
    padding    : 3px 3px 3px 10px;
    text-align : left;
}

/*********************** END ALLOCATION USAGE REPORT ***********/

.collapsible-header {
    cursor           : pointer;
    background-color : var(--colour-gray);
    color            : #070d12;
    padding          : 10px;
    font-size        : 18px;
    position         : relative;
    width            : 100%;
}

.product-type-header {
    background-color : #f0f0f0;
    font-size        : 16px;
    padding          : 8px;
    width            : 100%;
    text-align       : left;
}

.product-type-content, .collapsible-content {
    display    : none;
    overflow   : hidden;
    width      : 100%;
    transition : max-height 0.3s ease, padding 0.3s ease;
    padding    : 0;
}

.styled-table {
    width           : 100%;
    border-collapse : collapse;
    table-layout    : fixed;
}

.styled-table th, .styled-table td {
    border    : 1px solid #ddd;
    padding   : 8px;
    font-size : 12px;
}

.collapsible-header::after {
    content    : "▼";
    float      : right;
    font-size  : 16px;
    transition : transform 0.3s ease;
}

.collapsible-header.collapsed::after {
    transform : rotate(-180deg);
}

.collapsible-content.show, .product-type-content.show {
    display : block;
    padding : 10px;
}