*,
html,
body {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
}

a {
       text-decoration: none;
}

ul li {
       list-style-type: none;
}

:root {
       --animate-duration: 1s;
       --animate-delay: 1s;
       --animate-repeat: infinite;

       --pallete1: #5271ff;
       --pallete2: #38b6ff;
       --pallete3: #5e17eb;
       --pallete4: #004aad;
       --pallete5: #F5F7F8;
       --pallete6: #F6F5F5;
       --pallete7: #d9d9d9;
       --pallete8: #a6a6a6;
       --pallete9: #737373;
       --pallete10: #100C08;
       --pallete11: #3049A5;
       --pallete12: #F5F5F5;
       --pallete13: #60A3D9;
       --pallete14: #FD49A0;
       --pallete15: #070F2B;
       --pallete16: #222831;
       --pallete17: #31363F;
       --pallete18: #ff3131;
       --pallete19: #B4B4B8;
       --pallete20: #C7C8CC;
       --pallete21: #EF7C8E;
       --pallete22: rgb(245, 245, 245, 0.9);
       --pallete23: rgb(16, 12, 8, 0.8);
       --pallete24: #d8eefe;
       --pallete25: #e3f6f5;
       --pallete26: #ff5470;
       --pallete27: #094067;
       --pallete28: #232946;
       --pallete29: #25d366;
       --pallete30: #ff8906;
       --pallete31: rgb(255, 180, 0);
       --pallete32: rgb(9, 64, 103, 0.9);
       --pallete33: rgb(255, 244, 0);
       --pallete34: rgb(244, 205, 42);
       --pallete35: rgb(253, 246, 140);

       --pallete1op: rgba(82, 113, 255, 0.2);
       --pallete2op: rgba(56, 182, 255, 0.2);
       --pallete11op: rgba(48, 73, 165, 0.5);
       --pallete27op: rgba(9, 64, 103, 0.5);
       --pallete24op: rgba(216, 238, 254, 0.2);
       --pallete25op: rgba(227, 246, 245, 0.3);
       --pallete13op: rgba(96, 163, 217, 0.3);
}

/* === START - MODAL === */
#cekTagihan .modal-body iframe {
       height: 80vh;
       width: 100%;
       margin: auto;
       border-radius: 0.5rem;
}

#cekTagihan .modal-content .modal-body {
       display: flex;
       justify-content: center;
}


#informationModal .modal-header {
       color: white;
       display: flex;
       width: 100%;
}

#informationModal .modal-header img {
       height: 3rem;
       width: auto;
       position: absolute;
       left: 0.5rem;
}

#informationModal {
       justify-content: center;
}

#informationModal video {
       max-height: 420px;
       width: 100%;
       margin: auto;
}

/* #surveyKepuasanPelanggan .modal-content, */
#sambungBaru .modal-content,
#mitraPembayaran .modal-content,
#layananAduan .modal-content,
#cekTagihanWA .modal-content,
#informationModal .modal-content {
       width: auto;
       margin: auto;
}

/* #surveyKepuasanPelanggan img, */
#sambungBaru img,
#mitraPembayaran img,
#layananAduan img,
#cekTagihanWA img,
#informationModal img {
       max-height: 420px;
       width: 100%;
       margin: auto;
}


#modalWarningExtension .modal-content,
#modalNoIMG .modal-content {
       position: absolute;
       right: 0;
       left: 0;
       display: flex;
       align-items: center;
       margin: 10rem auto;
       text-align: center;
       width: 23rem;
       height: fit-content;
       color: var(--pallete11);
       font-weight: 400;
       box-shadow: 5px 10px 18px var(--pallete9);
       background-color: var(--pallete12);
}

#modalWarningExtension .modal-content p,
#modalNoIMG .modal-content p {
       display: flex;
       justify-content: center;
       font-size: 1rem;
       bottom: 1.5rem;
       width: 100%;
       margin: auto;
}

#modalWarningExtension .modal-content span,
#modalNoIMG .modal-content span {
       color: var(--pallete18);
       font-size: 4rem;
       /* animation: flash 3s ease-in-out infinite; */
}

#modalWarningExtension .modal-content button,
#modalNoIMG .modal-content button {
       font-size: 1rem;
       min-width: 40%;
       max-width: 80%;
       border: none;
       padding: 0.5rem;
       margin: 1rem auto;
       background-color: var(--pallete9);
       color: var(--pallete12);
       opacity: 0.7;
}

#modalWarningExtension .modal-content button:hover,
#modalNoIMG .modal-content button:hover {
       opacity: 1;
}

#modalWarningExtension .modal-content .btn-close,
#modalNoIMG .modal-content .btn-close {
       display: flex;
       justify-content: end;
       position: absolute;
       top: 0;
       right: 0;
       padding: 0.7rem;
       width: 10px;
       margin: auto;
       background-color: var(--pallete8);
}

#modalSuccessPsb .modal-content {
       position: relative;
       display: flex;
       justify-content: center;
       margin: auto;
       min-width: 17rem;
       height: 100%;
       color: var(--pallete10);
       text-align: center;
       font-size: 1rem;
       text-wrap: wrap;
       background-color: var(--pallete12);
}

#modalSuccessPsb .modal-content .icon-success {
       font-size: 5rem;
       color: var(--pallete29);
}

#modalSuccessPsb .modal-content span .close-btn {
       margin: 0.5rem;
       display: flex;
       justify-content: end;
}

#modalSuccessPsb .modal-content span a button {
       display: flex;
       align-items: center;
       justify-content: center;
}

#modalSuccessPsb .modal-content a button p {
       margin: auto;
       color: var(--pallete6);
}

/* ================================== */


#modalSuccessSKKIndex .modal-content,
#modalSuccessSKPIndex .modal-content,
#modalSuccessQuestion .modal-content,
#modalSuccessSKP .modal-content,
#modalSuccessInformation .modal-content,
#modalSuccessSurvey .modal-content {
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 5rem auto;
       height: 20rem;
       color: var(--pallete10);
       text-align: center;
       font-size: 1.5rem;
       text-wrap: wrap;
       text-indent: 1rem;
       background-color: var(--pallete12);
}


#modalSuccessSKP .modal-content button,
#modalSuccessSKKIndex .modal-content button,
#modalSuccessSKPIndex .modal-content button {
       position: absolute;
       right: 0.3rem;
       bottom: 0.3rem;
}

#modalSuccessSKP .modal-content a button,
#modalSuccessSKKIndex .modal-content a button,
#modalSuccessSKPIndex .modal-content a button {
       display: flex;
       align-items: center;
       justify-content: center;
}

#modalSuccessSKP .modal-content a button p,
#modalSuccessSKKIndex .modal-content a button p,
#modalSuccessSKPIndex .modal-content a button p {
       margin: auto;
       color: var(--pallete6);
}

/* ======= START MODAL SIMLUATION =========== */
#modalSimulationIndex .modal-content .modal-header {
       background-color: var(--pallete11);
       color: var(--pallete24);
       font-family: Arial, Helvetica, sans-serif;
       display: flex;
       justify-content: space-between;
       padding: 0.3rem;

}

#modalSimulationIndex .modal-content .modal-header img {
       width: 50px;
       height: 50px;
}

#modalSimulationIndex .modal-content .modal-footer {
       background-color: var(--pallete11);
       color: var(--pallete24);
       font-family: Arial, Helvetica, sans-serif;
       display: flex;
       justify-content: center;
       padding: 0.2rem;
}

#modalSimulationIndex .modal-content .modal-footer button {
       padding: 8px;
       min-width: 40%;
       background-color: var(--pallete12);
       color: var(--pallete10);
       opacity: 0.8;
}

#modalSimulationIndex .modal-content .modal-footer button:hover {
       opacity: 1;
}

/* ======= END MODAL SIMLUATION =========== */



@media (max-width: 768px) {

       html {
              font-size: 85%;
       }
}


@media (max-width: 640px) {}

@media (max-width: 568px) {}

@media (max-width: 450px) {}