@import url("/AyalaLand_UITheme/Theme.AyalaLand_UITheme.css?1622");

/*For Maintenance Options Block*/

.mo-option-btn {

    /*Font*/
    color: var(--neutral-neutral-9, #272B30);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    
    /*Button Container*/
    display: flex;
    padding: 8px 16px;
    width: 284px;
    height:40px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    background-color: white;
}

.mo-custombtn:hover{
    background-color: #A1D6C4;
}

.hidden {
    display: none;
}
/*------------------------------------*/

/*For Scheduling Management Block*/

.sm-brandContainer{
    display: flex;
    width: 350px;
    height: 350px;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 15.107px;
}

.sm-logoContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sm-ALPLogoImage{
    width: 305px;
    height: 65px;
    flex-shrink: 0;
}

.sm-AlveoLogoImage{
    width: 150px;
    height: 60px;
    flex-shrink: 0;
}

.sm-AvidaLogoImage{
    width: 120px;
    height: 60px;
    flex-shrink: 0;
}

.sm-AmaiaLogoImage{
    width: 120px;
    height: 60px;
    flex-shrink: 0;
}


.sm-flex-container {
    display: flex;
    flex-direction: row;
}

/* .tippy-popper{
    left: 133px !important;
    top: -220px !important;
} */

.tippy-tooltip{
    transition-duration: 20ms !important;
}


.brand-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 50px;
}

/*------------------------------------*/

/*For Add or Edit Excluded Dates Form Block*/

.aef-form-container{
    /*width: 415px;*/
    padding: 16px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    border-radius: 8px;
    background: #FFF;

    /* Primary Dropshadow */
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.20);
}

.aef-form-title{
    align-self: stretch;
    color: var(--neutral-neutral-9, #272B30);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.aef-form-label{
    align-self: stretch;
    color: var(--neutral-neutral-9, #272B30);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.aef-selectedDate-input{
    height: 40px;
    padding: 0px 16px;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid var(--neutral-neutral-5, #CED4DA);
    background: var(--neutral-neutral-0, #FFF);
}

.aef-description-container{
    /*width: 383px;*/
    height: 223px;
    display: flex;
    padding: 0px 16px;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    align-self: stretch;
    /*border-radius: 16px;*/
    border: 1px solid var(--neutral-neutral-5, #CED4DA);
    background: var(--neutral-neutral-0, #FFF);
}

.aef-status-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.aef-status-label{
    color: var(--neutral-neutral-9, #272B30);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.aef-radiobtn-container{
    display: flex;
    /*width: 110px;*/
    align-items: center;
    gap: 8px;
}

.aef-confirm-btn{

    /*Font*/
    color: var(--neutral-white, #FFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    /*Button Container*/
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 4px;
    border-color: #179961 !important;
    background: var(--approved-colors-ayala-green, #179960);
}

.aef-cancel-btn{

    /*Font*/
    color: var(--ayala-logo-green, #179960);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    /*Button Container*/
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex: 1 0 0;
    border-radius: 24px;
}

/*------------------------------------*/

/*For Excluded Dates Table Block*/

.edt-add-btn{
    
    /*Font*/
    color: var(--neutral-white, #FFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    /*Button Container*/
    display: flex;
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border-color: #179961 !important;
    background: var(--approved-colors-ayala-green, #179960);
}

.secondary-btn{
    
    /*Font*/
    color: #179960;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    /*Button Container*/
    display: flex;
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid #179960;
    background: #fff;
}
.edt-add-btnContainer{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

/*------------------------------------*/

.PointerCursor{
    cursor:pointer;
}

.NoMargin{
    margin: 0px;
}

.hide-content {
    visibility: hidden;
}

.ContainerShadow{
    -webkit-box-shadow: 0px 0px 30px 2px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 50px 2px rgba(0,0,0,0.8);   
}

div.Feedback_AjaxWait {
    background-color: rgba(255, 255, 255, .8)
}

/* Custom CSS */
.BottomUnderline {
    border-bottom: 2px solid #bfb8b8;
    padding-bottom: 20px;
}

.Breadcrumbs, .Breadcrumbs a {
    color: #179960;
}

.Breadcrumbs a:hover {
    color: #005E46;
}

.Buttonstyle{
    padding: 15px;
    text-align: center;
    border: 1px solid #fff;
}

/* Schedule  */

.timeslot-header {
    display: flex;
    align-items: center;
    gap: 40px;
    align-self: stretch;
}

.timeslot-subheader {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
}

.header-name {
    color: #000;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.header-secondary-name {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.sub-header-name {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.available-days {
    color: var(--neutral-neutral-9, #272B30);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.btn-custom-primary {
    background: var(--approved-colors-ayala-green, #179960);
    border-radius: 4px;
    display: flex;
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--neutral-white, #FFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.btn-custom-cancel {
    border-radius: 4px;
    display: flex;
    height: 40px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: var(--ayala-logo-green, #179960);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.icon-black {
    color: #1C1B1F !important;
}

.Search_wrapper input[type="text"] {
    padding-left: 15px;
}

.Search_wrapper:after {
    right: 15px;
    left: auto;
}

.NotVisible {
    visibility: hidden;
}

.iconRemove a {
    color: #fff;
}

.iconRemove a:hover {
    color: #f4e5e5;
}

.PropertyDetailsActiveMenu {
    color: white !important;
    font-weight: bolder;
}
.ContainerHeightSmall{
    height: 50px;
}

.ContainerHeightMedium{
    height: 100px;
}

.ContainerHeightLarge{
    height: 150px;
}
.ContainerOpacity{
    opacity: 0.4;
}

.CardImageHeightXSmall img{
    min-height: 50px;
    max-height: 50px;
}

.CardImageHeightSmall img{
    min-height: 100px;
    max-height: 100px;
}

.CardImageHeightMedium img{
    min-height: 200px;
    max-height: 200px;
}

.CardImageHeightLarge img{
    min-height: 450px;
    max-height: 450px;
}

.LinkContainer{
    position: absolute;
    top: 10px;
    right: 10px;
}

.ActionContainer {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.ParentofLinkContainer{
    position: relative;
}

.FullHeight {
    height: 100%;
}

.FullWidthBottomRight{
    position: absolute;
    bottom: 20px;
    right: 0px;
    left: 0px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.TextAlignCenter{
    text-align: center;
}

.CustomTextSmall {
    font-size: 1.2em !important;
}

.Font18 {
    font-size: 18px;
}

/* Override style of rich widget popup upload*/
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    border-bottom: none;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    margin: 20px 0px 0px 25px;
}

/* -- Override style of multiple upload button --*/
.qq-upload-button{
    float:left;
    margin: 0px;
}
/* -- Padding -- */
.padding-xs{
    padding: 5px;
}

/* -- Margin -- */
.margin-right-s{
    margin-right: 5px;
}

.margin-right-m{
    margin-right: 10px;
}

.margin-right-l{
    margin-right: 20x;
}

.margin-right-xl{
    margin-right: 30px;
}

div.Feedback_Message_Wrapper {
    left: 0;
    z-index: 9999;
}
input[type="radio"] {    border: none !important;}

.ThemeGreen  {color:#179960;}

.NoMarginLeft {margin-left: 0 !important;}

.BookingAction {
    text-align: right;
}

.phone .BookingAction {
    text-align: left;
}

/* calendar custom */
.Calendar-navBtn > div {
    color: #179960;
}

/* Custom min width for the cell the need to limit the min width  */
.Min-Width100{
    min-width: 175px;
}
/*Removes pen icon in the select 2 component*/
.FormEditPencil:before {
    display: none;
}

/*Overrides the padding of the custom tab*/
.desktop .FullWidth .CustomTabs.TabsContainer > .Tabs > .Tabs_header {
    padding: 0 102px;
}

.Underline-Text{
    text-decoration: underline;
}

.NotificationPos{
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
}

.NotificationPos .IconBadge_number{
        padding: 8px 5px;
}

.tooltipster-base.Balloon.tooltipster-fade.tooltipster-fade-show {
    z-index: 99;
}

/*------------------------------------------------------------*/
/* Example1 > Feedback Ajax Loading ***************************/
/*------------------------------------------------------------*/

.Feedback_AjaxWait {
    background: rgba(255, 255, 255, .8); /* Opacity layer color - choose your color*/
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    bottom: 0;
    color: #003755; /* Text color - choose your color */
    height: 100%;
    right: 0;
    width: 100%;
}

.ie :not(.ie11):not(.ie10).Feedback_AjaxWait{
    height: 100%;
}

.FeedbackAjax_Content {
    margin: 20% auto;
}

.FeedbackAjax_Content .item_text {
    font-size: 24px;
}

.FeedbackAjax_Content .sk-circle {
    height: 80px;
    position: relative;
    text-align: center;
    width: 100%;
}

.FeedbackAjax_Content .sk-circle .sk-child {
    height: 80px;
    left: 47%;
    position: absolute;
    top: 0;
    width: 80px;
}

.FeedbackAjax_Content .sk-circle .sk-child:before {
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    background: #003755; /* Loading background - choose your color */
    border-radius: 100%;
    content: "";
    display: block;
    height: 15%;
    margin: 0 auto;
    width: 15%;
}

.FeedbackAjax_Content .sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg);
}

.FeedbackAjax_Content .sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
}

.FeedbackAjax_Content .sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
}

.FeedbackAjax_Content .sk-circle .sk-circle4:before {
    -webkit-animation-delay: -.9s;
            animation-delay: -.9s;
}

.FeedbackAjax_Content .sk-circle .sk-circle5:before {
    -webkit-animation-delay: -.8s;
            animation-delay: -.8s;
}

.FeedbackAjax_Content .sk-circle .sk-circle6:before {
    -webkit-animation-delay: -.7s;
            animation-delay: -.7s;
}

.FeedbackAjax_Content .sk-circle .sk-circle7:before {
    -webkit-animation-delay: -.6s;
            animation-delay: -.6s;
}

.FeedbackAjax_Content .sk-circle .sk-circle8:before {
    -webkit-animation-delay: -.5s;
            animation-delay: -.5s;
}

.FeedbackAjax_Content .sk-circle .sk-circle9:before {
    -webkit-animation-delay: -.4s;
            animation-delay: -.4s;
}

.FeedbackAjax_Content .sk-circle .sk-circle10:before {
    -webkit-animation-delay: -.3s;
            animation-delay: -.3s;
}

.FeedbackAjax_Content .sk-circle .sk-circle11:before {
    -webkit-animation-delay: -.2s;
            animation-delay: -.2s;
}

.FeedbackAjax_Content .sk-circle .sk-circle12:before {
    -webkit-animation-delay: -.1s;
            animation-delay: -.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
                transform: scale(0);
    } 40% {

        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
                transform: scale(0);
    } 40% {

        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
/****BlankState****/
.Blank {
    background: none;
    border: 1px dashed #DDDDDD;
    border-radius: 6px;
}
/****MobileImg****/

.PhoneLoginImg {
    border: 3px solid #dcddde;
    border-radius: 32px;
    height: 46px;
    margin: 0 10px;
    width: 46px;
}

.PhoneLastLogin{
    color: #FFF;
    opacity: 0.6;
    padding: 0px 29px;
    font-size: 12px;
    margin-top: 10px;
}

.phone .Menu {
    background: #005E46;
}

.PhoneLoginMenu .MenuItem {
    display: block;
    padding: 10px 0px;
}

.MenuItem:active {
    box-shadow: inset 0 2px 6px 0 rgba(18,20,20,0.3);
}

/*Custom Card Customizations*/
.CustomCardBG .CardBackground_Content{
    opacity: 1;
}

.CustomCardBGDetails{
    top:50%;
    padding-top:0px;
}

.CustomCardBG.CardBackground .CardBackground_Content:hover {
    background-color: #f0f0f0;
    opacity: 0.8;
    color: #192620;
}

.CustomCardBG.CardBackground .CardBackground_Content:hover .Heading5 {
    color: #192620;
}


.margin-top-l{
    margin-top: 15px;
}

.Button.SolidButton{
    background-color: #cfcfcf;
}

.CookiesAcceptBtn {
    border: 1px solid gray;
    color: white;
}

CardBackground_Content.OSInline:hover > .CustomCardBGDetails > .HoverPropertyName{
    color:#192620;
}

.CircularImage{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.CircularImage img {
 width: 100%;
  height: auto;
}

.HomePageNotesBox {
    background-color: white;
    padding: 3px 15px;
    color: black;
}

.Section_header{
    border-bottom: 2px solid darkgray;
}

.tablet .CustomTabMessage .Alert{
    margin-bottom: 0px;
}

.phone .CustomTabMessage .Alert{
    margin-bottom: 0px;
}

.desktop .CustomHeaderIcon {
    width: 6%; 
}

.desktop .CustomHeaderContent{
    width: 90%;
}

.tablet .CustomHeaderIcon, .phone .CustomHeaderIcon{
    width:15%;
}

.CustomHeaderContent{
    width:85%;
}

/*tablet*/
.Page:not(.phone):not(.desktop) .FullWidth .CustomBox.FullWidthPadding {
    padding-left: 20px;
    padding-right:50px;
    padding-top: 15px;
    padding-bottom: 15px;
}

/*desktop*/
.Page:not(.phone):not(.tablet) .FullWidth .CustomBox.FullWidthPadding {
    padding-left: 120px;
    padding-right:50px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.Page:not(.phone):not(.tablet) .FullWidth .HeaderContent.CustomBox.FullWidthPadding {
    padding-top: 45px;
}

.tablet .Application_Title{
    padding-left: 10px;
}

.tablet .owl-prev.fa.fa-fw.fa-angle-left,
.phone .owl-prev.fa.fa-fw.fa-angle-left{
    left: 3px;
}

.phone .owl-next.fa.fa-fw.fa-angle-right{
    right: 3px;
}

.ProjectContainer .UsePadding{
    padding-bottom: 0px !important;
}

.Page:not(.phone) .PropertyHeader{
    padding: 6px 50px 0px 84px;
}

.Page.phone .PropertyHeader{
    padding: 20px;
}

.phone .BookingContainer{
    text-align:left;
}

.BookingContainer{
    text-align:right;
}

.phone .FaqQuestionsContrainer .Heading2.SectionExpandable__title{
    line-height: 18px;
}

.tablet .BookingContainer{
    float: right;
    position: absolute;
    right: 20px;
}

.phone .BrandImage{
    max-width: 90%;
}

.Page:not(.phone):not(.tablet) .FullWidth .CustomBox.FullWidthPadding{
    padding-left: 70px;
}

.desktop .FullWidth .CustomTabs.TabsContainer > .Tabs > .Tabs_header{
    padding-left: 50px;
}

.Page.desktop .PropertyHeader{
    padding-left:70px;
}

.desktop .Header.FullWidth .Header_title{
    padding-left:60px;
}

.ConstructionUpdatesNotesBox {
    background-color: lightyellow;
    padding: 25px;
    color: black;
    margin-top: 20px;
}

.CardBackground_Content{
    width:50%;
}

.tablet .CardBackground_Content{
    width:60%;
}

.phone .PhoneLoginImg img{
    border-radius:32px;
}

.HeaderContent.CustomBox.FullWidthPadding {
    height: calc(100vh - 131px);
}

.HeaderContent.CustomBox.Box:before {
    background-color: rgba(0,0,0,0.3);
}

.Header_title2 {
    padding-left: 64px;
}

.custom-nav {
    display: inline-flex;
    /*border-radius: 5px;*/
    flex-direction: column;
    position: absolute;
    height: auto;
    align-items: center;
    padding: 15px;
    margin-left: 0px;
    z-index: 100;
    
    
}

.custom-nav-overlay {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    
    
}

.custom-nav.is-open + .custom-nav-overlay {
    display: block;
}

.custom-nav-icon {
    align-items: center;
    display: flex;
    justify-content: center;
}

.custom-nav-header {
    display: flex;
}

.custom-nav-logo {
    display: none;
    margin-left: 10px;
}

.custom-nav.is-open {
    background-color: #FFFFFF;     
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    padding: 10px 15px;
}

.custom-nav.is-open .custom-nav-logo {
    display: block;
}

.custom-nav-logo img {
    height: 40px;
    width: auto;
}

.custom-nav.is-open .custom-nav-icon {
    color: #a5a5a5;
    
    
}

.custom-nav.is-open .custom-nav-content {
    display: block;
}

.custom-nav-content {
    display: none;
    width: 100%;
}

.custom-nav-content a,
.custom-nav-content a:visited {
    display: block;
    padding: 6px 6px;
}

.custom-nav-content  a:hover {
    background-color: #eaeaea;
}
/*override by Carl Noel Villar 10-27-2020*/
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    margin:0 0 0 15px;
}

.select{
    height:48px !important;
}
.body{
    background-color: unset;
}
.Home_background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url("/BuyersPortal_TH/img/MakatiGrayscale2.jpg?2165&3489");
    z-index: -10;
}

.OuterLayer_OverlayDiv{
    position:relative;
    display: inline-block;
    width:100%;
    height:  400px;
    min-height: 400px;
}

.BackgroundImage_OverlayDiv{
width:100%;
    height:  500px;
    min-height: 500px;
}


.InnerLayer_OverlayDiv {
    margin: 0;
    padding: 0;
    height:  500px;
    min-height: 500px;
    width: 100%;
    position: absolute;   
    top: 0;
    left: 0;
    z-index: 1;
}
.vertical-alignmiddle{
    vertical-align: middle !important;
}
.bottom-position-div{
    width: 100%;
    position: absolute;
    bottom:20px;
    
}

.Primary_Text{
    color:#179960;
}



/* Schedule timeslots  */

.timeslot-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.timeslot-day {
    display: flex;
    height: 68.571px;
    padding: 0px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.timeslot-day-selected {
    background: #A1D6C4;
}

.timeslot-border-bottom {
    border-bottom: 1px solid var(--neutral-stroke, #CED4DA);
}

.timeslot-display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.timeslot-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.timeslot-column-content {
    display: flex;
    padding: 0px 24px;
    gap: 8px;
    align-self: stretch;
    height: 48px;
    align-items: center;

}
.timeslot-col1 {
    width: 30%;
}

.timeslot-col2 {
    width: 70%;
}

.timeslot-notes {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.timeslot-notes-content {
    color: var(--neutral-neutral-9, #272B30);
    text-align: left;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}

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

.timeslot-btn {
    width: 139px;
    border-radius: 4px !important;
    background: #179960 !important;
    height: 35px;
    padding: 4px 16px;
}

/* Schedule timeslots END */



/* Schedule Time Picker from OS 11  */

/* $4.2.12 - Patterns - Controls - TimePicker */
.time-picker .dropdown-content-list .time-option[disabled="disabled"] {
    color: var(--color-neutral-6);
}

.time-picker .select {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    height: 100%;
    padding: 0;
    position: relative;
}

.time-picker .select:hover,
.time-picker .select:focus {
    border: 0;
}

.time-picker .is--visible .dropdown-header.select {
    border: 0;
}

.time-picker .dropdown-header-text {
    width: 100%;
}

.time-picker .dropdown-icon {
    position: absolute;
    right: 16px;
    top: 8px
}

.time-picker .dropdown-content {
   
}

.time-option-selected {
    background-color: var(--color-neutral-2);
 }

.is-rtl .time-picker .dropdown-icon {
    left: 16px;
    right: auto;
}

/* Popup  */
.MainPopup {
    padding: 20px;
}

/* Popup  END*/

/* Button Footer Component  */

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.button-width {
    max-width: 179.5px;
}

.no-border {
    border: none;
}

.background-transparent {
    background: transparent;
}

/* Button Footer Component END  */


.text-error-message {
    color: var(--extended-palette-red-base, #C92A2A);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.input-error-border {
    border: 1px solid var(--Avida-Red, #A32A2E);
}

.pb-20 {
    padding-bottom: 20px;
}



/* CP Table Custom  */
.cp_custom_table, th, td {
    border-collapse: collapse !important;
    margin: 0 !important;
}

.cp_custom_table > th {
    height: 48px;
}


.cp_custom_table > tbody > tr > td {
    border: 1px solid #CED4DA !important;
}


.cp_custom_table > thead > tr > th {
    border: 1px solid #CED4DA !important;
}



/* CP Table Custom END  */


/* CP Custom Links  */
.cp_custom_link {
    color: var(--ayala-alveo-light-blue, #0097E4);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}

/* CP Custom Links END */

/*CP Account Requests FONTS START*/

@font-face {    
    font-family: 'Poppins';
    src: url('/BuyersPortal_TH/Poppins-Regular.ttf'); 
    font-style: normal;
}

@font-face {    
    font-family: 'Poppins-Bold';
    src: url('/BuyersPortal_TH/Poppins-Bold.ttf');
    font-style: normal;
}

@font-face {    
    font-family: 'Poppins-Medium';
    src: url('/BuyersPortal_TH/Poppins-Medium.ttf');
    font-style: normal;
}
/*CP Account Requests FONTS END*/

/*Font-sizes*/
.font-14 {
    font-size: 14px;
}
.font-16 {
    font-size: 16px;
}
.font-18 {
    font-size: 18px;
}
.font-20 {
    font-size: 20px;
}
.font-22 {
    font-size: 22px;
}

/*font-family*/
.poppins-font-normal {
    font-family: Poppins;
}

.poppins-font-medium {
    font-family: Poppins-Medium;
}

.poppins-font-bold {
    font-family: Poppins-Bold;
}

/*colors*/
.color-neutral-9 {
    color: var(--neutral-neutral-9, #272B30);
}

/*CP Account Requests START */
.account-request-filter-main{
    width: 100%;
    padding: 16px;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    overflow-x: auto;
}

.account-request-filter-main-wrapper{
    width: 100%;
    max-width: 1256px;
}

.account-request-filter-header, .account-request-filter-footer{
    display: flex;
    gap: 16px;
}

.account-request-filter-header-col1{
    gap: 16px;
}

.account-request-filter-col{
    display: flex;
    width: 100%;
    gap: 16px;
}

.account-request-filter-dateto-errormsg{
    position: relative;
    width: 100%;
}

.account-request-filter-dateto-errormsg-text{
    color: #c7331f;
    position: absolute;
    top: 0px;
}


.account-request-filter-inputs{
    display: flex;
    margin-bottom: 16px;
}

.account-request-filter-label-cont{
    width: 100%;
    min-width: 104px;
    max-width: 104px;
    padding-top: 8px;
}

.account-request-filter-label{
    font-family: 'Poppins-Medium';
    font-weight: 500;
    font-size: 14px;
    color: #000;
}

.account-request-filter-input-cont{
    width: 100%;
    max-width: 294px;
    min-width: 294px;
    height: auto;
}

.account-request-filter-input[type="text"],
.account-request-filter-dropdown,
.account-request-filter-input[type="date"]{
    width: 100%;
    height: 40px;
    font-weight: 400;
    font-family: 'Poppins';
}

.account-request-filter-dropdown{
    font-family: 'Poppins-Medium';
    font-weight: 700;
    color: #179960;
}

.account-request-filter-footer .account-filters-btn,
.account-request-filter-footer .account-filters-reset-btn{
    width: 191px;
    height: 40px;
    border-radius: 4px;
    font-family: 'Poppins-Medium';
    font-weight: 500;
}
.account-request-filter-footer .account-filters-reset-btn{
    color: #1F4843;
    border: 1px solid #1F4843;
}

div.pika-single {
    z-index: 2;
}

select.ThemeGrid_MarginGutter, input.ThemeGrid_MarginGutter{
    margin-left: 0px;
}

.account-requests-tab-main{
    width: 100%;
    margin-top: 32px;
    position: relative;
}

.account-requests-tab-main-border-bottom{
    z-index: 1;
    top: 45px;
    border-top: 2px solid #CED4DA;
    width: 100%;
    position: absolute;
}

.account-requests-tab-main-wrapper{
    display: flex;
    width: 100%;
    max-width: 1256px;
}
.account-requests-tab-col{
    cursor: pointer;
    width: 33.33%;
    min-width: 135px;
    text-align: center;
    color: #909090;
    font-size: 16px;
    padding: 10px;
    font-weight: 500;
    font-family: 'Poppins';
}

.account-requests-tab-selected{
    z-index: 2;
    color: #1F4843;
    font-weight: 700;
    border-bottom: 2px solid #1F4843;
}

.account-requests-title{
    font-family: 'Poppins-Medium';
    font-size: 28px;
    font-weight: 700;
}

.account-request-table-header-label{
    color: #4F575E;
    font-family: 'Poppins-Medium';
    font-size: 14px;
    font-weight: 500;
}

.account-request-table-row-text{
    color: #4F575E;
    font-family: 'Poppins';
    font-size: 14px;
    font-weight: 400;
}

@media screen and (max-width: 1400px){
    .account-request-filter-header{
        display: block;
    }

    .account-request-filter-inputs-other{
        width: 50%;
        padding-left: 8px;
    }
}

@media screen and (max-width: 1030px){
    .account-request-filter-col{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .account-request-filter-header-col1{
        display: block;
    }

    .account-request-filter-inputs-other{
        width: 100%;
        padding-left: 0px;
    }
}
/*CP Account Requests END */


/* CP Custom Tabs */
.custom-tab-header{
    position: relative;
}

.custom-tab-header-container-border-bottom{
    z-index: 1;
    top: 45px;
    border-top: 2px solid var(--neutral-stroke, #CED4DA);
    width: 100%;
    position: absolute;
}

.custom-tab-header-container {
    display: flex;
    align-items: center;
    align-self: stretch;
    height:44px;  
}

.custom-tab-header-selected {
    z-index: 2;
    border-bottom: 2px solid var(--approved-colors-ayala-green, #1F4843);
}

.custom-tab-header-not-selected {
    border-bottom: 2px solid var(--neutral-stroke, #CED4DA);
}

.custom-tab-header-content {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
}

.custom-header-1 {
    width: 50%;
    padding-bottom: 9px;
    padding-top: 17px;
    text-align: center;
}

.custom-header-2 {
    width: 50%;
}

.custom-tab-font-selected {
    color: var(--approved-colors-ayala-green, #1F4843);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.custom-tab-font-not-selected {
    color: var(--neutral-text-lighter-gray-text, #909090);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.redirection-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 80vh;
    justify-content: center;
}

.redirection-ui {
    width: 30vw;
}