:root {
    --main-min-width: 22rem;
    --main-max-width: 44rem;
    --main-big-font-size: 1rem;
    --main-medium-font-size: 0.9rem;
    --main-small-font-size: 0.8rem;
    --main-base-color: 255, 255, 255;
    --main-accent-color: 0, 0, 255;
    --main-low-contrast-color: 246, 247, 251;
    --main-medium-contrast-color: 128, 128, 128;
    --main-high-contrast-color: 0, 30, 58;
    --main-radius:1.5rem 1.5rem 1.5rem 1.5rem; 
    --main-big-radius:1.5rem 1.5rem 0rem 0rem; 
    --main-font-bold-weight:bold;
    --main-font-medium-weight:medium;
    --main-font-weight:normal;
    --main-box-shadow: 0px 0px 10px 5px rgba(var(--main-high-contrast-color),0.04);
    --main-lines-thickness:0.125rem;
    --main-padding-size:1.5rem;
    --main-margin-size:1.5rem;

    --basic_unit:3px; 
    --text_size:calc(var(--basic_unit)*3);
    /* --block_size:calc(var(--basic_unit)*6.5); */
    --block_size:calc(var(--basic_unit)*8.5);
    --mini_size:calc(var(--basic_unit)*40); 
    --card_size:calc(var(--basic_unit)*88); 
    --content_size:calc(var(--card_size)*2 + var(--basic_unit)*4);
    --screen_size:calc(var(--card_size)*4.2);
    --hover_color: rgba(0, 0, 177, 0.08);
    --main_color: rgba(0, 0, 177, 1);
    --unselected_color: rgba(0, 0, 177, 0.6);   
    }

    

    body {
        font-family: 'Montserrat', sans-serif;
    }

    .bold{
        font-weight: var(--main-font-bold-weight);
          }
      
    .open {
        padding-bottom: var(--main-padding-size); 
        }
      
    .Payment-medium-text{
        font-size: 1.125rem;
        font-weight: 700;
    }

    .PaymentModalWrapper {
        display: none;
        position: fixed;
        z-index: 1503;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .PaymentModal {
        margin: auto;
        color: rgb(var(--main-high-contrast-color));
        background-color: rgb(var(--main-base-color));
        width:100%;
        height: 100%;
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);;
        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .PaymentModal::-webkit-scrollbar {
        display: none !important;
        }

    .PaymentItems{
        margin-top: calc(1.6*var(--main-margin-size));
        margin-bottom: calc(1.6*var(--main-margin-size));
        }

    .PaymentPathDiv {
        background-color: rgb(var(--main-base-color));
        }
    
    .PaymentItem {
        margin-top: calc(0.6*var(--main-margin-size));
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        box-shadow: var(--main-box-shadow);
        border-radius: var(--main-radius);
        z-index: 1501;
        background-color:rgb(var(--main-base-color));
        position: relative;
        }

    .PaymentItemContent {
        padding: calc(1.6*var(--main-padding-size));
        }

    .PaymentItemContentHeader {
        padding-top:calc(0.6*var(--main-padding-size));
        padding-bottom:calc(0.6*var(--main-padding-size));
    }

    .PaymentItemContentSelection {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        }

    .PaymentItemContentExtended {
        display: flex;
        align-items: center;
        justify-content: space-between;
        }
    

    .PaymentItemContentSubSelection {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        }

    /* .PaymentItemContentResponsive {
        } */
        
    .PaymentListStatus {
        color:rgb(var(--main-accent-color));
        }
        
    /* .PaymentListTitle {
        } */
    
    .PaymentItemConfirmButton {
        /* display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row; */
        cursor:pointer;
        background-color:rgb(var(--main-accent-color));
        color:rgb(var(--main-base-color));
        border-radius: var(--main-radius);
        width: 70%;
        /* align-self: center; */
        margin: auto;
        /* 2rem; */
        margin-top: var(--main-margin-size); 
        /* 1rem; */
        margin-bottom: var(--main-margin-size);
        }

        .PaymentItemConfirmButtonPlain {
            cursor: pointer;
            background-color: rgb(var(--main-accent-color));
            color: rgb(var(--main-base-color));
            border-radius: var(--main-radius);
            margin: calc(var(--main-margin-size)*3);
        }

        .PaymentItemContentButtonPlain {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            /* flex-direction: row; */
            padding-left: var(--main-padding-size);
            padding-right: var(--main-padding-size);
            /* padding-top: 0.75rem;
            padding-bottom: 0.75rem; */
            min-height: calc(2*var(--main-padding-size));;
        }

        .PaymentItemInnerContentButtonPlain {
            display: flex;
            flex-grow: 1;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
        }

    .PaymentListWrapper {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
        flex-grow: 1;
        /* margin-bottom:var(--main-margin-size); */
        }

    /* avoid usign media query for breaking point - use js to handle class variable based on div instead  */
    /* ensure the mediaquery comes after the original rule */
    @media (max-width: 30rem) {
        .PaymentListWrapper {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    .PaymentSortingMenuSelectorTitle {
        font-size: var(--main-medium-font-size);
        }
    
    .PaymentMainMenuSelectorDescription {
        font-size: var(--main-small-font-size);
        line-height: 1.125rem;
        font-weight: var(--main-font-medium-weight);
        }

    .PaymentIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:var(--main-margin-size);
        margin-right:var(--main-margin-size);
        height: 2.625rem;
        min-width:2.625rem;
        border-radius: var(--main-radius);
        fill: none;
        stroke: rgb(var(--main-accent-color));
        stroke-width: var(--main-lines-thickness); 
        stroke-linecap: round;
        stroke-linejoin: round;
        }

    .PaymentIcon:hover {
        box-shadow: var(--main-box-shadow);
        cursor: pointer;
        }
    
    .PaymentIcon.inactive:hover {
        box-shadow: none;
        cursor: auto;
        }

    .PaymentConnectionLine{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left:var(--main-margin-size);
        margin-right:var(--main-margin-size);
        min-width:2.625rem;
        border-radius: var(--main-radius);
        fill: rgb(var(--main-base-color));
        stroke: rgb(var(--main-accent-color));
        stroke-width: var(--main-lines-thickness); 
        stroke-linecap: round;
        stroke-linejoin: round;
        }

    .PaymentListContent{
        padding-left: 0rem;
        padding-right: var(--main-padding-size);
        padding-top: calc(0.6*var(--main-padding-size));
        padding-bottom: calc(0.6*var(--main-padding-size));
        }