/*Added [ mlgd ] */
/******************************************
 *                                        |
 *         END OF REUSABLE CSS            |
 *         [Bootsrap inspired]            |
 *                                        |
 ******************************************/

/* DEFAULT VAR */
.main-section.pagibig { --main-border-color: #AAA;}

.main-section.pagibig div[vw="cfppreview"] { border: 1px solid #000; }

/* element visiblity */
.main-section.pagibig .visible { visibility: visible; }
.main-section.pagibig .invisible { visibility: hidden; }


/*container || directions*/
.main-section.pagibig .container { padding: 1%; }

/* display */
.main-section.pagibig .d-none { display: none; !important; }
.main-section.pagibig .d-flex { display: flex; }
.main-section.pagibig .column { display: flex; flex-direction: column; }

.main-section.pagibig .d-flex.d-none,
.main-section.pagibig .column.d-none { display: none; !important; }

/*justify-content*/
.main-section.pagibig .justify-content-between { justify-content: space-between; }
.main-section.pagibig .justify-content-center { justify-content: center; }
.main-section.pagibig .justify-content-end { justify-content: end; }
.main-section.pagibig .justify-content-start { justify-content: start; }
.main-section.pagibig .justify-content-around { justify-content: space-around; }

/*text-align*/
.main-section.pagibig .text-start { text-align: start; }
.main-section.pagibig .text-center { text-align: center; }
.main-section.pagibig .text-end { text-align: end; }

/* Align content */
.main-section.pagibig .align-content-center { align-content: center; }
.main-section.pagibig .align-content-start { align-content: start; }
.main-section.pagibig .align-content-end { align-content: end; }

/*Align-items*/
.main-section.pagibig .align-items-start { align-items: flex-start; }
.main-section.pagibig .align-items-end { align-items: flex-end; }
.main-section.pagibig .align-items-center { align-items: center; }
.main-section.pagibig .align-items-baseline { align-items: baseline; }
.main-section.pagibig .align-items-stretch { align-items: stretch; }

/*reusable sizing*/
.main-section.pagibig .w-100 { width:100% }
.main-section.pagibig .w-95 { width:95% }
.main-section.pagibig .w-90 { width:90% }
.main-section.pagibig .w-85 { width:85% }
.main-section.pagibig .w-80 { width:80% }
.main-section.pagibig .w-75 { width:75% }
.main-section.pagibig .w-70 { width:70% }
.main-section.pagibig .w-65 { width:65% }
.main-section.pagibig .w-60 { width:60% }
.main-section.pagibig .w-55 { width:55% }
.main-section.pagibig .w-50 { width:50% }
.main-section.pagibig .w-45 { width:45% }
.main-section.pagibig .w-40 { width:40% }
.main-section.pagibig .w-35 { width:35% }
.main-section.pagibig .w-30 { width:30% }
.main-section.pagibig .w-25 { width:25% }
.main-section.pagibig .w-20 { width:20% }
.main-section.pagibig .w-15 { width:15% }
.main-section.pagibig .w-10 { width:10% }
.main-section.pagibig .w-5 { width:5% }

.main-section.pagibig .max-w-100 { max-width:100% }
.main-section.pagibig .max-w-95 { max-width:95% }
.main-section.pagibig .max-w-90 { max-width:90% }
.main-section.pagibig .max-w-85 { max-width:85% }
.main-section.pagibig .max-w-80 { max-width:80% }
.main-section.pagibig .max-w-75 { max-width:75% }
.main-section.pagibig .max-w-70 { max-width:70% }
.main-section.pagibig .max-w-65 { max-width:65% }
.main-section.pagibig .max-w-60 { max-width:60% }
.main-section.pagibig .max-w-55 { max-width:55% }
.main-section.pagibig .max-w-50 { max-width:50% }
.main-section.pagibig .max-w-45 { max-width:45% }
.main-section.pagibig .max-w-40 { max-width:40% }
.main-section.pagibig .max-w-35 { max-width:35% }
.main-section.pagibig .max-w-30 { max-width:30% }
.main-section.pagibig .max-w-25 { max-width:25% }
.main-section.pagibig .max-w-20 { max-width:20% }
.main-section.pagibig .max-w-15 { max-width:15% }
.main-section.pagibig .max-w-10 { max-width:10% }
.main-section.pagibig .max-w-5 { max-width:5% }


.main-section.pagibig .min-w-100 { min-width:100% }
.main-section.pagibig .min-w-95 { min-width:95% }
.main-section.pagibig .min-w-90 { min-width:90% }
.main-section.pagibig .min-w-85 { min-width:85% }
.main-section.pagibig .min-w-80 { min-width:80% }
.main-section.pagibig .min-w-75 { min-width:75% }
.main-section.pagibig .min-w-70 { min-width:70% }
.main-section.pagibig .min-w-65 { min-width:65% }
.main-section.pagibig .min-w-60 { min-width:60% }
.main-section.pagibig .min-w-55 { min-width:55% }
.main-section.pagibig .min-w-50 { min-width:50% }
.main-section.pagibig .min-w-45 { min-width:45% }
.main-section.pagibig .min-w-40 { min-width:40% }
.main-section.pagibig .min-w-35 { min-width:35% }
.main-section.pagibig .min-w-30 { min-width:30% }
.main-section.pagibig .min-w-25 { min-width:25% }
.main-section.pagibig .min-w-20 { min-width:20% }
.main-section.pagibig .min-w-15 { min-width:15% }
.main-section.pagibig .min-w-10 { min-width:10% }
.main-section.pagibig .min-w-5 { min-width:5% }

/*reusable span styling*/
.main-section.pagibig .font-italic { font-style: italic; }
.main-section.pagibig .font-undeline { text-decoration: underline; }
.main-section.pagibig .font-weight-normal { font-weight: normal; }
.main-section.pagibig .font-weight-bold { font-weight: bold; }
.main-section.pagibig .font-weight-bolder { font-weight: bolder; }
.main-section.pagibig .font-weight-light { font-weight: lighter; }

/*reset*/
.main-section.pagibig .reset-mx { margin-right: 0px; margin-left: 0px}
.main-section.pagibig .reset-my { margin-top: 0px; margin-bottom: 0px}
.main-section.pagibig .reset-px { padding-right: 0px; padding-left: 0px}
.main-section.pagibig .reset-py { padding-top: 0px; padding-bottom: 0px}

/* START OF SPACE STYLING */
/*reusable margin maximum of 5 percent*/
.main-section.pagibig .m-5 { margin: 5% !important; }
.main-section.pagibig .m-4 { margin: 4% !important; }
.main-section.pagibig .m-3 { margin: 3% !important; }
.main-section.pagibig .m-2 { margin: 2% !important; }
.main-section.pagibig .m-1 { margin: 1% !important; }

.main-section.pagibig .mt-5 { margin-top: 5% !important; }
.main-section.pagibig .mt-4 { margin-top: 4% !important; }
.main-section.pagibig .mt-3 { margin-top: 3% !important; }
.main-section.pagibig .mt-2 { margin-top: 2% !important; }
.main-section.pagibig .mt-1 { margin-top: 1% !important; }

.main-section.pagibig .me-5 { margin-right: 5% !important; }
.main-section.pagibig .me-4 { margin-right: 4% !important; }
.main-section.pagibig .me-3 { margin-right: 3% !important; }
.main-section.pagibig .me-2 { margin-right: 2% !important; }
.main-section.pagibig .me-1 { margin-right: 1% !important; }

.main-section.pagibig .mb-5 { margin-bottom: 5% !important; }
.main-section.pagibig .mb-4 { margin-bottom: 4% !important; }
.main-section.pagibig .mb-3 { margin-bottom: 3% !important; }
.main-section.pagibig .mb-2 { margin-bottom: 2% !important; }
.main-section.pagibig .mb-1 { margin-bottom: 1% !important; }

.main-section.pagibig .ms-5 { margin-left: 5% !important; }
.main-section.pagibig .ms-4 { margin-left: 4% !important; }
.main-section.pagibig .ms-3 { margin-left: 3% !important; }
.main-section.pagibig .ms-2 { margin-left: 2% !important; }
.main-section.pagibig .ms-1 { margin-left: 1% !important; }

.main-section.pagibig .mx-5 { margin-left: 5% !important; margin-right: 5% !important; }
.main-section.pagibig .mx-4 { margin-left: 4% !important; margin-right: 4% !important; }
.main-section.pagibig .mx-3 { margin-left: 3% !important; margin-right: 3% !important; }
.main-section.pagibig .mx-2 { margin-left: 2% !important; margin-right: 2% !important; }
.main-section.pagibig .mx-1 { margin-left: 1% !important; margin-right: 1% !important; }

.main-section.pagibig .my-5 { margin-top: 5% !important; margin-bottom: 5% !important; }
.main-section.pagibig .my-4 { margin-top: 4% !important; margin-bottom: 4% !important; }
.main-section.pagibig .my-3 { margin-top: 3% !important; margin-bottom: 3% !important; }
.main-section.pagibig .my-2 { margin-top: 2% !important; margin-bottom: 2% !important; }
.main-section.pagibig .my-1 { margin-top: 1% !important; margin-bottom: 1% !important; }

/*reusable padding maximum of 5 percent*/
.main-section.pagibig .p-5 { padding: 5% !important; }
.main-section.pagibig .p-4 { padding: 4% !important; }
.main-section.pagibig .p-3 { padding: 3% !important; }
.main-section.pagibig .p-2 { padding: 2% !important; }
.main-section.pagibig .p-1 { padding: 1% !important; }

.main-section.pagibig .pt-5 { padding-top: 5% !important; }
.main-section.pagibig .pt-4 { padding-top: 4% !important; }
.main-section.pagibig .pt-3 { padding-top: 3% !important; }
.main-section.pagibig .pt-2 { padding-top: 2% !important; }
.main-section.pagibig .pt-1 { padding-top: 1% !important; }

.main-section.pagibig .pe-5 { padding-right: 5% !important; }
.main-section.pagibig .pe-4 { padding-right: 4% !important; }
.main-section.pagibig .pe-3 { padding-right: 3% !important; }
.main-section.pagibig .pe-2 { padding-right: 2% !important; }
.main-section.pagibig .pe-1 { padding-right: 1% !important; }

.main-section.pagibig .pb-5 { padding-bottom: 5% !important; }
.main-section.pagibig .pb-4 { padding-bottom: 4% !important; }
.main-section.pagibig .pb-3 { padding-bottom: 3% !important; }
.main-section.pagibig .pb-2 { padding-bottom: 2% !important; }
.main-section.pagibig .pb-1 { padding-bottom: 1% !important; }

.main-section.pagibig .ps-5 { padding-left: 5% !important; }
.main-section.pagibig .ps-4 { padding-left: 4% !important; }
.main-section.pagibig .ps-3 { padding-left: 3% !important; }
.main-section.pagibig .ps-2 { padding-left: 2% !important; }
.main-section.pagibig .ps-1 { padding-left: 1% !important; }


.main-section.pagibig .px-5 { padding-left: 5% !important; padding-right: 5% !important; }
.main-section.pagibig .px-4 { padding-left: 4% !important; padding-right: 4% !important; }
.main-section.pagibig .px-3 { padding-left: 3% !important; padding-right: 3% !important; }
.main-section.pagibig .px-2 { padding-left: 2% !important; padding-right: 2% !important; }
.main-section.pagibig .px-1 { padding-left: 1% !important; padding-right: 1% !important; }

.main-section.pagibig .py-5 { padding-top: 5% !important; padding-bottom: 5% !important; }
.main-section.pagibig .py-4 { padding-top: 4% !important; padding-bottom: 4% !important; }
.main-section.pagibig .py-3 { padding-top: 3% !important; padding-bottom: 3% !important; }
.main-section.pagibig .py-2 { padding-top: 2% !important; padding-bottom: 2% !important; }
.main-section.pagibig .py-1 { padding-top: 1% !important; padding-bottom: 1% !important; }

/* END OF SPACE STYLING */

/* START OF BORDER STYLING */
.main-section.pagibig .border-0 { border: none; }
.main-section.pagibig .border-top-0 { border-top: none }
.main-section.pagibig .border-right-0 { border-right: none }
.main-section.pagibig .border-bottom-0 { border-bottom: none }
.main-section.pagibig .border-left-0 { border-left: none }

.main-section.pagibig .border { border: 1px solid var(--main-border-color); }
.main-section.pagibig .border-top { border-top: 1px solid var(--main-border-color); }
.main-section.pagibig .border-right { border-right: 1px solid var(--main-border-color); }
.main-section.pagibig .border-bottom { border-bottom: 1px solid var(--main-border-color); }
.main-section.pagibig .border-left { border-left: 1px solid var(--main-border-color); }

.main-section.pagibig .border-radius-0 { border-radius: 0px; }
.main-section.pagibig .grow-1 { flex-grow: 1; }
.main-section.pagibig .grow-2 { flex-grow: 2; }
/* END OF BORDER STYLING */


/*Disable selection of elements*/
div.main-section.pagibig .prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


/******************************************
 *                                        |
 *         END OF REUSABLE CSS            |
 *                                        |
 ******************************************/



/******************************************
 *                                        |
 *         START OF CUSTOM CSS            |
 *                                        |
 ******************************************/
body{ all: unset; overflow: hidden; background-repeat: no-repeat; background-size: 100vw 100vh; }
.main-section.pagibig div[section="content-container"] { 
    background-color:white; height:100%; width:80%; justify-self: center; 
    /* padding: 10px; */
}


div.main-section.pagibig .form-label-header{ color: #1B65AC; font-size: 18px; font-weight: bolder}
div.main-section.pagibig div#form-content .form-notes > span { margin: 5px 0 }

div.main-section.pagibig div#form-content .form-notes > span { margin: 5px 0; font-size: 14px; }

div.main-section.pagibig div#form-content [section="form-section-name"] > div {
    width: 33%;
}

div.main-section.pagibig .required-field { border: 1px solid red !important; }

div.main-section.pagibig textarea { resize:none; }

div.main-section.pagibig div#form-content div.inactive{ opacity: 0.5 }

/* MEDIA QUERY */
@media only screen and (max-width: 768px){
    div.main-section.pagibig .adaptive{
        flex-wrap: none;
        flex-direction: column;
    }

    div.main-section div[section="notations"],
    div.main-section div.adaptive#form-content div#owner,
    div.main-section div.adaptive#form-content div#rep{
        width: 100% !important;
    }

    div.main-section div.adaptive#form-content div#rep{
        border: none;
    }

}


/**********************************************************
 *                                                        *
 *                      FORM V2 CSS                       *
 *                                                        *
 **********************************************************/



/* TOGGLE BUTTON REPRESENTATIVE */
    div.main-section.pagibig .toggle-button-cover {
        margin: 0 10px;
        display: table-cell;
        position: relative;
        box-sizing: border-box;
    }

    div.main-section.pagibig .button-cover {
        height: 100px;
        margin: 20px;
        background-color: #fff;
        box-shadow: 0 10px 20px -8px #c5d6d6;
        border-radius: 4px;
    }

    div.main-section.pagibig .button-cover:before {
        counter-increment: button-counter;
        content: counter(button-counter);
        position: absolute;
        right: 0;
        bottom: 0;
        color: #d7e3e3;
        font-size: 12px;
        line-height: 1;
        padding: 5px;
    }

    div.main-section.pagibig .button-cover,
    div.main-section.pagibig .knobs,
    div.main-section.pagibig .layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    div.main-section.pagibig .button {
        position: relative;
        top: 50%;
        width: 74px;
        height: 36px;
        margin: -20px auto 0 auto;
        overflow: hidden;
    }

    div.main-section.pagibig .checkbox {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

    div.main-section.pagibig .knobs {
        z-index: 2;
    }

    div.main-section.pagibig .layer {
        width: 100%;
        background-color: #ebf7fc;
        transition: 0.3s ease all;
        z-index: 1;
    }

    div.main-section.pagibig .button.r,
    div.main-section.pagibig .button.r .layer {
        border-radius: 100px;
    }

    div.main-section.pagibig #button-3 .knobs:before {
        content: "NO";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 20px;
        height: 10px;
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        line-height: 1;
        padding: 9px 4px;
        background-color: gray;
        border-radius: 50%;
        transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    }

    div.main-section.pagibig #button-3 .checkbox:active + .knobs:before {
        width: 46px;
        border-radius: 100px;
    }

    div.main-section.pagibig #button-3 .checkbox:checked:active + .knobs:before {
        margin-left: -26px;
    }

    div.main-section.pagibig #button-3 .checkbox:checked + .knobs:before {
        content: "YES";
        left: 42px;
        background-color: #1B65AC;
    }

    div.main-section.pagibig #button-3 .checkbox:checked ~ .layer {
        background-color: #ebf7fc ;
    }
/*END OF TOGGLE CSS*/


/* MAIN FORM v2 */


    /*RESET*/
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }

    div.main-section.pagibig div.page_1.v2 .fade { opacity: 0.5 }

    div.main-section.pagibig div.page_1.v2 div[section="details"] select, 
    div.main-section.pagibig div.page_1.v2 div[section="details"] input{all: revert; border: 0.5px solid gray; border-radius: 3px; }
    div.main-section.pagibig div.page_1.v2 div[section="details"] select{height: 26px; min-width: 225px; min-height: 28px}
    div.main-section.pagibig div.page_1.v2 div[section="details"] input{ height: 24px; padding: 0 5px; min-width: 213px; min-height: 26px}

    div.main-section.pagibig div.page_1.v2  div#form-details > div[section="details"] {
        margin: 20px 0;
    }

    div.main-section.pagibig div.page_1.v2  div#form-details > div[section="details"] > span.detail-header {
        margin: 5px 0;
        color: #1B65AC;
        font-size: 18px;
        font-weight: bolder;
    }

    /* MEDIA QUERY */
    @media only screen and (max-width: 768px){
        div.main-section.pagibig div.page_1.v2 .adaptive{
            flex-wrap: none;
            flex-direction: column;
        }

        div.main-section.pagibig div.page_1.v2 input{min-width: 95%; max-width:95% }
        div.main-section.pagibig div.page_1.v2 select{min-width: calc(95% + 10px); max-width:calc(95% + 11px) }

    }
/* END MAIN FORM v2 */


/**********************************************************
 *                                                        *
 *               END OF FORM V2 CSS                       *
 *                                                        *
 **********************************************************/

/* FOR TICKET VIEWING CSS  */
    div.main-section.pagibig div#ticket_viewing {
        display: flex; flex-direction: column; height: 100%;
        justify-content: center; align-items: center;
    }
    div.main-section.pagibig div#ticket_viewing > div { margin: 20px; display:flex; }

    div.main-section.pagibig div#ticket_viewing div#tv_section_text {
        flex-direction: column; 
        justify-content: center; align-items: center;
    }

    div.main-section.pagibig div#ticket_viewing div#tv_section_text > span {
        margin: 5px 0;
    }


    div.main-section.pagibig div#ticket_viewing div#tv_section_tix {
        flex-wrap: wrap; 
        justify-content: center; align-items: center; 
        border: 1px solid black; width: 80%; padding: 5px;
    }

    div.main-section.pagibig div#ticket_viewing div#tv_section_tix > span#tix_label {
        color: gray; margin: 0 10px;
    }

    div.main-section.pagibig div#ticket_viewing div#tv_section_tix > span#tix_value {
        font-weight: bolder;
    }

    div.main-section.pagibig div#ticket_viewing div#tv_section_btns {
        flex-wrap: wrap;
    }

    div.main-section.pagibig button {
        all:revert; color: white; background-color: #1B65AC; 
        min-width: 200px; width: 25%; height: 40px; border: none; 
        text-decoration: none; margin: 5px;
    }

    div.main-section.pagibig div#ticket_viewing div#tv_section_btns > button#btn_back_mainpage {
        background-color: #93AA3E;"
    }

    div.main-section.pagibig button:hover {
        box-shadow: 3px 2px dimgray;
    }
/* END OF TICKET VIEWING CSS  */

/******************************************
 *                                        |
 *          END OF CUSTOM CSS             |
 *                                        |
 ******************************************/