@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?255");

/* ===================================================================== */
/*  The following CSS was created using Theme Editor.                    */
/*  To modify this CSS, click "Open Theme Editor".                       */
/* ===================================================================== */

/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */

:root {
    /* Color - Brand */
    --color-primary: #3a77c7;
    --color-secondary: #3a77c7;

    --color-primary-hover: #2c5995;
    --color-primary-selected: rgba(58, 119, 199, .12);

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;

    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;

    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;

    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;

    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;

    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;

    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;

    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;

    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;

    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;

    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;

    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;

    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-neutral-10: #15181a;

    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #e03131;

    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;

    --color-success-light: #eaf3eb;
    --color-success: #2a843c;

    --color-info-light: #e5f5fc;
    --color-info: #009dde;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --side-menu-size: 300px;
}

/* Login Image */

.layout-login-simple .layout-login-background, .layout-login-background {
    background-image: url('/OutSystemsUIWeb/img/DatePicker.png?255');
    background-size: cover;
	background-position: center center;
    background-repeat: no-repeat;
}

.btn,
.Button {
    color: var(--color-primary);
}

.tag,
.badge,
.btn.Is_Default, 
.Button.Is_Default {
    color: #fff;
}

@charset "UTF-8";
 
:root {
    --color-primary: #3a77c7; /*primary-color*/
    --color-primary-hover: #3a83c7; /*primary-color*/
    --color-secondary: #000000; /*primary-color*/
    --color-primary-lightest: #75bbdf;
    
    /* CustomColor */
    --color-base-0: #eceff1;
    --color-base-1: #cfd8dc;
    --color-base-2: #999999;
    --color-base-3: #727c7c;
    --color-base-4: #454545;
    
    --color-emphasis: #fb8c00;
    --color-stars: #fdd835;
    --color-nile-blue: #13b5b1;
    
    /* App Settings */
    --color-background-body: #fff; /*background-color*/
    
    --font-size-xxs: 10.5px;

}

/* ----------------------------------------------------------------
    Header
------------------------------------------------------------------- */
.layout .main {
    padding-top:0;
}
.layout .header {
    position: inherit;
    right: inherit;
    top: inherit;
}

/* ----------------------------------------------------------------
    Common Color
------------------------------------------------------------------- */
.color-f00 {color: #f00;}
.color-333 {color: #333;}

/* ----------------------------------------------------------------
    Common font-size
------------------------------------------------------------------- */
.fs12{font-size: 12px;}
.fs14{font-size: 14px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
/* ----------------------------------------------------------------
    Common width
------------------------------------------------------------------- */
.widinhe{width: inherit!important;}
/* ================================================================ */
/*  OverWrite BaseTheme                                             */
/* ================================================================ */
/*  $1 - Resets                            */
/*  $1.0.1 - Font Definition               */
html {    
    color: var(--color-neutral-9);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body { 
    line-height: 1.43;
}
.layout-top .content .ThemeGrid_Container {
    /*padding: var(--space-xl) var(--space-base);*/
    padding: var(--space-base);
}
.phone .content .ThemeGrid_Container {
    padding: var(--space-none);
}
.menu-icon {
    display: none!important;
}
::placeholder {
  color: #ccc;
}
/* Chrome, Safari */
::-webkit-input-placeholder {
  color: #ccc;
}
/* Firefox */
::-moz-placeholder {
  color: #ccc;
}
/* IE */
:-ms-input-placeholder {
  color: #ccc;
}
/* Edge */
::-ms-input-placeholder {
  color: red;
}

/* ----------------------------------------------------------------
    OverWrite Layout Popup
------------------------------------------------------------------- */
@media screen and (max-width: 375px) {
    html > body.phone {
        min-width: 340px;  
    }
}
@media screen and (max-width: 320px) {
    html > body.phone {
        min-width: 310px;  
    }
}

/* $2.5 - HTML Elements - Buttons */
.btn-small {
    padding: var(--space-none) var(--space-xs);
}

.Button.background-primary, .btn.background-primary {
    /*, a.Button, a.btn, a.Button:link, a.btn:link*/
    color: var(--color-neutral-0);
}

.Button:hover, .btn:hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}
.Is_Default {
    background-color: var(--color-emphasis);
    border: var(--border-size-none);
    color: var(--color-neutral-0) !important;
}
.Is_Default:hover {
    color: var(--color-neutral-0);
}

.btn.gray,.Button.gray {
    background-color: var(--color-neutral-8);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}
.btn.light ,.Button.light{
    background-color: var(--color-primary-lightest);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}
.btn.nile-blue ,.Button.nile-blue{
    background-color: var(--color-nile-blue);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}
.Button.btn-expand, .btn-expand{
    padding-left: var(--space-m);
    padding-right:var(--space-m);
}
.Button.btn-narrow, .btn-narrow{
    height: 28px;
    width: auto;
}
.HotelSelected{
    background-color: var(--color-primary-lightest);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid currentColor;
    color: var(--color-primary);
    display: -ms-inline-flexbox;
    display: -webkit-inline-box;
    display: inline-flex;
    font-weight: var(--font-semi-bold);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
}

[disabled="disabled"] {
    background-color: var(--color-neutral-2);
    border: 1px solid var(--color-neutral-4) !important;
    color: var(--color-neutral-0);
    pointer-events: none !important;
}

.tablet .Button.btn-narrow, 
.tablet .btn-narrow,
.tablet .Button.btn-narrow, 
.tablet .btn-narrow {
    width: auto;
}
.phone .Button + .Button {
    margin-left: var(--space-s);
}
.phone .btn +.btn,
.phone .Button + .Button {
    margin-top: var(--space-none);
}

.Button.btn-width-auto, .btn-width-auto{
    width: auto;
}

/* $4.1.6 - Patterns - Content - Card */
.card.basic {
    background-color: var(--color-base-0);
    border-radius: none;
    border-width: var(--border-size-none);
}
.card.top-title{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top:none;
}

.card.padding {
    background-color: var(--color-base-0);
    border-radius: none;
    border-width: var(--border-size-none);
    padding-left: 0px;
    padding-right: 0px;
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
}

/* $4.4.7 - Patterns - Navigation - Wizard */
.desktop .not-full .wizard {justify-content: center; padding-left: 20%; padding-right: 20%;}
/*.desktop .not-grow .wizard .wizard-item{ flex: 0;}*/
.wizard-item-icon {
    background-color: var(--color-base-1);
    border-radius: var(--border-radius-circle);
    border: var(--border-size-m) solid var(--color-neutral-5);
    color: var(--color-neutral-0);
}
.wizard-item.active .wizard-item-icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.wizard-item.past .wizard-item-icon {
    background-color: var(--color-base-1);
    border-color: var(--color-base-1);
    color: var(--color-neutral-0);
}
.wizard-item.past .wizard-item-icon-wraper:before,
.wizard-item.active .wizard-item-icon-wraper:before,
.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-base-1);
}
.phone .wizard .wizard-item {
   width:10%;
}
.phone .wizard-item-icon-wraper {
    margin: var(--space-xs) var(--space-none);
}

/* ================================================================ */
/*  Border Color                                                    */
/* ================================================================ */
.border-color-primary {border-color: var(--color-primary) !important; }
.border-color-neutral-5 {border-color: var(--color-neutral-5) !important; }
.border-color-red {border-color: #f00; }
.border-color-blue {border-color: #00f; }
.border-color-neutral-4 {border-color: var(--color-neutral-4) !important; }

/* ================================================================ */
/*  Border                                                          */
/* ================================================================ */
.border-top {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-left {
    border-left-width: 1px;
    border-left-style: solid;
}

.border-right {
    border-right-width: 1px;
    border-right-style: solid;
}

.border-bottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-bottom-dashed {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}

/* ================================================================ */
/* Text                                                             */
/* ================================================================ */
.text-emphasis { color: var(--color-emphasis);}
.text-primary-lightest { color: var(--color-primary-lightest);}
/* ================================================================ */
/*  Text Underline                                                  */
/* ================================================================ */
.text-under {text-decoration: underline;}

/* ================================================================ */
/*  Link                                                  */
/* ================================================================ */
.link {
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: underline;
}

/* ================================================================ */
/*  caption box                                                     */
/* ================================================================ */
.captions-container {
    padding: var(--space-s) var(--space-base);
}
.desktop .captions-container > div {

}
.captions-container > div > div {
    padding: var(--space-xs);
    margin-top: var(--space-s);
}
.captions-container > div > div:first-child {
    background: var(--color-neutral-2);
    font-size: var(--font-size-xs);
}

/* ================================================================ */
/* $5.5 - RichWidgets - FeedbackMessage                             */
/* ================================================================ */
.desktop a.Feedback_Message_Wrapper_Close {
    width: 100%;
    height: 100%;
    text-align: right;
    padding-right: 10px;
    right:0px;
}

/* $6.1.1 - Styles - Typography - Sizes Desktop */
.font-size-xxs {
    font-size: 10.5px;
}
.font-size-m {
    font-size: 20px;
    font-weight: var(--font-semi-bold);
}
.font-size-l {
    font-size: 24px;
    font-weight: var(--font-semi-bold);
}
.font-tel {
    font-size: 30px;
    font-weight: var(--font-bold);
}

/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */
.background-base-0 { background-color: var(--color-base-0);/*#eceff1*/ }
.background-base-1 { background-color: var(--color-base-1);/*#cfd8dc*/ }
.background-base-2 { background-color: var(--color-base-2);/*#727c7c*/ }
.background-base-3 { background-color: var(--color-base-3);/*#999999*/ }
.background-base-4 { background-color: var(--color-base-4);/*#333333*/ }

/* ================================================================ */
/* $99.99 - CustomStyle ~ new define class                          */
/* ================================================================ */
.desktop .flight-plan-wrapper {position: relative; padding-left: var(--space-base); }
.desktop .ListRecords .flight-plan-wrapper:not(:last-child) .flight-plan { 
    border-left: 5px dotted var(--color-primary);
}
.flight-date {
    padding: var(--space-s) var(--space-base);
    /*margin-top: var(--space-base);*/
}

.desktop .flight-date::before {
    content: "";
    display:inline-block;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    border-radius: var(--border-radius-circle);
    position: absolute;
    top: 17px;
    left: 12px;
}
.tablet .flight-date::after,.phone .flight-date::after {
    content:"";
    display:block;
    position: absolute;
    border-bottom: 2px solid var(--color-primary);
    width: 100vw;
    left: 0px;
}
.flight-plan {
    padding: 0 var(--space-s) 0 var(--space-base); 
}
.desktop .flight-plan {
    padding: 0 var(--space-s) 0 var(--space-base); 
}
.tablet .flight-plan,
.phone .flight-plan {
    padding: 0 var(--space-s);
}

/*Wb_flight_time_wrap*/
/*.min-block{display: inline-block; width:auto; white-space: nowrap;box-sizing: border-box;}*/
/*.flight-time-wrap .flex1:first-child{margin-right:5%;}
.flight-time-wrap .flex1:last-child{margin-left:5%;}*/
.horizon-border-middle{position: relative;}
.horizon-border-middle::before{ 
    content:""; 
    display: block;
    position: absolute;
    top:50%;
    width:100%;
    border-top:2px solid var(--color-primary);
}
.flight-time-wrap.horizon-border-middle::before{ 
    content:""; 
    right:30%;
    width:20%;
}
.flight-time-wrap.horizon-border-middle.time2time::before{ 
    content:""; 
    top: 15px;
}

/* ================================================================ */
/*   expand-controler                                               */
/* ================================================================ */
a.expand-ctrl, a.expand-ctrl:link{ display: inline-block; width:100%; position: relative; }
a.expand-ctrl::after ,a.expand-ctrl:link::after  {display:inline-block; content:"\f078"; font-family: fontawesome; color: var(--color-base-4); position: absolute; right:10px; }
a.expand-ctrl.open::after ,a.expand-ctrl.open:link::after  {transform:rotate(180deg); }

/* ================================================================ */
/*  table                                                           */
/* ================================================================ */
.table-collapse{border-collapse:collapse;}
.table-separate{border-collapse:collapse;}
.tabel-border-s tr td {
    border-width: var(--border-size-s);
}
table.table-align-right-nth1 tr th:nth-child(1), table.table-align-right-nth1 tr td:nth-child(1){ text-align:right;}
table.table-align-right-nth2 tr th:nth-child(2), table.table-align-right-nth2 tr td:nth-child(2){ text-align:right;}
/* ================================================================ */
/*  Label                                                           */
/* ================================================================ */
.label-status {
    display: inline-block;
    width: auto;
    font-size: var(--font-size-s);
    background-color: var(--color-neutral-5);
    color: var(--color-neutral-10);
    border-radius: 1em;
    padding-left: 1em;
    padding-right: 1em;
    vertical-align: baseline;
}
.label-status.row {
    background:var(--color-primary);
    color: var(--color-neutral-0);
}
.label-status.heigh {
    background:var(--color-primary-lightest);
    color: var(--color-neutral-0);
}
.label-status.emphasis {
    background:var(--color-emphasis);
    color: var(--color-neutral-0);
}
.label-name {
    display: inline-block;
    width: auto;
    font-size: var(--font-size-xxs);
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    padding: var(--space-none) var(--space-xs);
}


/* ================================================================ */
/*  vertical                                                        */
/* ================================================================ */
.vertical-top{ vertical-align: top;}
.vertical-middle{ vertical-align: middle;}
.vertical-bottom{ vertical-align: bottom;}
/* ================================================================ */
/*  icon-tilt                                                       */
/* ================================================================ */
.fa-plane{
    transform:rotate(45deg);
}
/* ================================================================ */
/*  device view                                                       */
/* ================================================================ */
.desktop table.desktop-block {
    display:inline-block;
}
.desktop table.desktop-block td {
    display:block;
}
.tablet table.mobile-block,
.phone table.mobile-block  {
    display:inline-block;
    width: 100%;
}
.tablet table.mobile-block td,.phone table.mobile-block td {
    display:block;
    width: 100%;
}

/* ================================================================ */
/*  image size                                                   */
/* ================================================================ */
.air-logo-size {
    max-width: 40px;
    max-height: 16px;
    vertical-align: -1.5px;
}
.hotel-img-size {
    max-width: 180px;
}
.hotel-img-size-s {
    max-width: 120px;
}
    .phone .hotel-img-size-s {
        max-width: 90px;
    }
.tour-img-size {
    max-width: 120px;   
}
    .phone .tour-img-size {
        max-width: 90px;   
    }

/* ================================================================ */
/*  見出し、囲みカラム                                                */
/* ================================================================ */
.heading-pagetitle {
    font-weight: var(--font-regular);
    font-size: 20px;
    text-align: left;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .heading-pagetitle {
        font-size: 16px;
        padding: 10px 10px 0;
        display: block;
    }
}
        

.label-title,
.heading-primary {
    display: block;
    padding: var(--space-s) var(--space-base);
    margin-top: var(--space-base);
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}
.heading-primary_Tripla {
    display: block;
    padding: var(--space-s) var(--space-base);
    margin-top: var(--space-base);
    background-color: #7e7e7e;
    color: var(--color-neutral-0);
}
.background_Tripla {
    background-color: #7e7e7e;
}
.background_Tripla2 {
    background-color: #7e7e7e;
    color: var(--color-neutral-0);
}
.label-title.base-0,
.heading-normal {
    display: block;
    padding: var(--space-xs) var(--space-base);
    margin-top: var(--space-base);
    background-color: var(--color-neutral-3);
    color: var(--color-neutral-10);
}
.heading-detail {
    display: block;
    padding: var(--space-xs) var(--space-base);
    margin-top: var(--space-base);
    background-color: #fee767;
    color: var(--color-neutral-10);
}
.border-column {
    display: block;
    background-color: var(--color-neutral-0);
    padding: var(--space-s) var(--space-base);
    border: 1px solid var(--color-neutral-3);
}

/* temp */
.desktop .flight-plan div:first-child .heading-primary  {
        margin-top: 0 !important;
}
.desktop .btn-large.Is_Default,
.desktop-small .btn-large.Is_Default {
    min-width: 240px;   
}

.btn-middle {
    font-size: var(--font-size-base);
    height: 48px;
}

.desktop .btn-middle.Is_Default,
.desktop-small .btn-middle.Is_Default {
    min-width: 170px;   
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin-bottom: var(--space-xs);
}

/* ----------------------------------------------------------------
    Footer
------------------------------------------------------------------- */
.background-footer {
    background-color: #ccdbee;
}
.background-footer_Tripla {
    background-color: #7e7e7e;
}
.background-footer_Relux {
    background-color: #333333;
}
/* ----------------------------------------------------------------
    Popup
------------------------------------------------------------------- */
body.desktop .os-internal-Popup .os-internal-ui-dialog,
body.desktop .os-internal-Popup.os-internal-ui-dialog {
    /*min-width: 400px;*/
}
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
    max-height: 95vh; /* iframe document height fix */
}
div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space, 
div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
    height: 0 !important;
}
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title {
    background-position: center center;
    background-color: #fff;
    height: 30px;
    width: 30px;
    right: -10px;
    top: -10px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #454545;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) ;
}
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
    background-position: center center;
    background-color: #fff;
    opacity: 1;
    transform: rotate(90deg);
}
.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: 0;   
}

/* ----------------------------------------------------------------
    Table シンプルで汎用的なレイアウトテーブル
------------------------------------------------------------------- */
.table-simple {
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.table-simple > div {
    display: table-header-group; 
}
.table-simple td,
.table-simple > div > div {
    display: table-cell;
    border: 1px solid var(--color-neutral-5);
    padding: var(--space-xs) var(--space-base);
    width: 1%;
}

/* ----------------------------------------------------------------
    Table 最終確認画面の価格詳細テーブルの幅調整
------------------------------------------------------------------- */
.table-simple.price-detail > div > div:first-child {
       width: 20%;
}
.table-simple.price-detail > div > div:not(:first-child) {
       width: 16%;
}

/* ----------------------------------------------------------------
    Input Textarea Select 入力部品関連
------------------------------------------------------------------- */
.input, textarea.input, .select {
    padding: var(--space-none) var(--space-s);
}
.select {
    background-position: center right 4px;
    background-repeat: no-repeat;
    background-size: 8px 4px;
    height:30px;
    line-height: 200%;
}
.input-view-mode {
    background-color: var(--color-neutral-1);
    border: var(--border-size-s) solid var(--color-neutral-5);
    padding: var(--space-none) var(--space-s);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--border-radius-soft);
    height: 30px;
    line-height: 200%;
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
}
.input-departure-date {
    border: var(--border-size-s) solid var(--color-neutral-5);
    padding: var(--space-none) var(--space-s);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--border-radius-soft);
    height: 45px;
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
}
.input-departure-date input {
    margin-top: -15px;
    text-align: text-align-center;
    background-color: transparent;
    border: none !important;
}

/* ----------------------------------------------------------------
    Button Group レスポンシブをオフにする対応
------------------------------------------------------------------- */
.phone .sort-price-wrap .button-group label {
    -webkit-box-flex: inherit;
            -ms-flex: inherit;
                flex: inherit;
    width: inherit; 
}
.phone .sort-price-wrap .button-group label .btn {
    border: var(--border-size-s) solid var(--color-primary);   
}
.phone .sort-price-wrap .button-group label:not(:first-of-type) .btn {
    border-left: inherit;
}
.phone .sort-price-wrap .button-group label:first-child .btn {
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}
.phone .sort-price-wrap .button-group label:last-child .btn {
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
}
.phone .sort-price-wrap .button-group,
.phone .sort-price-wrap .button-group .ListRecords {
    -ms-flex-wrap: inherit;
        flex-wrap: inherit;
    width: inherit;
}

/* ----------------------------------------------------------------
    Tips
------------------------------------------------------------------- */
.text-nowrap {
    white-space: nowrap;   
}
.padding-xxs {
    padding: 1px;
}

/* ----------------------------------------------------------------
    Go To
------------------------------------------------------------------- */
.GoToSerchResultTop {
    padding: 0 10px;
    text-align: center;
}
.GoToSerchResultTop div {
    background-color: var(--color-nile-blue);
    color: var(--color-neutral-0);
    display: inline-block;
    padding: 10px;
    border-radius: 37px;
    margin: 10px auto;
}

.GoToValid{
    margin: 8px 0;
    font-size: 90%;
    font-weight: bold;
}

.GoToValid .text-emphasis {
    color: #000000;
}

.GoToValid .font-size-l {
    font-size: 130%;
}

.Scrollable_Wrapper {
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.half-width{
    width: 50%;
}

.half-height{
    height: 50%;
}

.width-30{
    width:30%;
}

.width-70{
    width:70%;
}

.MainPopup:has(.rx__airPop-list) .columns .columns-item:empty {
    display: none;
}
.MainPopup:has(.rx__airPop-list) {
    padding: 24px 24px 100px;
}
.__RentCarTitleContainer{
    font-size:14px;
}