@import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Cinzel+Decorative&family=Creepster&family=Electrolize&family=Labrada&family=Lemon&family=Pathway+Gothic+One&family=Rock+Salt&family=Share+Tech+Mono&display=swap');

.head {
    color: #ffff;

}

.cad {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.tax {
    font-size: .8rem;
    color: #fff;

}

.bta {
    float: right;
    padding: .2rem 1.3rem;
    color: #fff;
    box-shadow: 2px 2px solid black;
}


.bta a {
    float: right;
    padding: .2.5rem 1.3rem;
    color: #fff;
    box-shadow: 2px 2px 5px solid black;
}

.bta a:hover {
    color: #fff;
    box-shadow: 2px 2px 5px solid black;

}


#navbar {

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    text-align: center;
}

#navbar .col {
    float: left;
    display: block;
    text-align: center;
    font-size: 12px;
}

#navbar .col a {
    text-decoration: none;
    color: #000;
    opacity: .8;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}




/* #navbar a:hover {
    background-color: #ddd;
    color: black;
} */

/*------------------------------- LOGIN -------------------------------*/
.headl {
    border-radius: 0rem 0rem 1.5rem 1.5rem;
    background-color: #fb4e4e;
    padding: 1.2rem;
    width: 100%;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.head1 {
    margin-left: 1rem;
    color: #fff;
}

.headl h3 {
    color: #fff;
    font-size: 1.2rem;
}

.head1:hover {
    background-color: #ccc;
    padding: .1rem .25rem;
    border-radius: 50%;

}



/* CSS */
.button-30 {
  align-items: center;
  appearance: none;
  background-color: #FCFCFD;
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding: 1.8rem 3rem;
    position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 22px;
}

.button-30:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}
.login {
    text-decoration: none;
    color: #fff;
    font-size: .85rem;
    background-color: rgba(2, 136, 209, 1);
    padding: .9rem 6.3rem;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.reg {
    text-decoration: none;
    color: #000;
    font-size: .85rem;
    padding: .9rem 1.1rem;

    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.forget {
    text-decoration: none;
    color: #000;
    font-size: .85rem;
    padding: .9rem 1.1rem;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

/*---------------------------- WIN ----------------------------*/



 




/* CSS */
.button-71 {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 12px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-71:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}

.button-71:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .button-71 {
    padding: 16px 48px;
  }
}



/* CSS */
.button-72 {
    background-color: red;
    border: 0;
    border-radius: 56px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
    font-size: 18px;
    font-weight: 600;
    outline: 0;
    padding: 12px 21px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-72:before {
    background-color: initial;
    background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
    border-radius: 125px;
    content: "";
    height: 50%;
    left: 4%;
    opacity: .5;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 92%;
  }
  
  .button-72:hover {
    box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
    transform: scale(1.05);
  }
  
  @media (min-width: 768px) {
    .button-72 {
      padding: 16px 48px;
    }
  }

/* Style the tab */
.tab {
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    text-align: center;
}

/* .tab .container .row .col-3:hover {
    background-color: yellowgreen;
}

.tab .container .row .col-3:active {
    background-color: yellowgreen;
} */

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    text-align: center;
    transition: 0.3s;
    font-size: 14px;
    color: #000;
    opacity: .8;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;

}




/* Change background color of buttons on hover */
.tab button:hover {
    border-bottom: 2px solid #0288d1;
    background-color: #adb4f3;
}

/* Create an active/current tablink class */
.tab button:active {
    border-bottom: 2px solid #0288d1;

}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}




.bta1 {
    background-color: #00b0ff;
    padding: .6rem 5.6rem;
}

.bta2 {
    border-radius: 50%;
    padding: 1.5rem 2rem;
    color: #fff;
    font-weight: bold;
}

.bta2:hover {
    border: none;
    border-radius: 20px 0px 20px 0px;
    background-color: yellowgreen;
    background-image: linear-gradient(green, yellowgreen);
    color: white;
    font-weight: bold;
}

/* .bta2:hover {
    border: none;
    border-radius: 25px;
    background-color: yellowgreen;
     background-image: radial-gradient(green,yellowgreen);
    color: white;
    font-weight: bold;
} */


.har {
    font-weight: 900;
}

.next1 a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    float: right;
}

.next1 a:hover {
    background-color: #ddd;
    color: black;
}

.previous {
    background-color: #f1f1f1;
    color: black;
}

.next {
    background-color: #04AA6D;
    color: white;
}

.round {
    border-radius: 50%;
}

.table tr:hover {
    background-color: #ccc;

}

thead,
th {
    opacity: .7;
    font-size: .7rem;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
    background-color: #fbedf3;
    font-size: 1.1rem;
    font-weight: bold;
}

tbody,
td {
    font-size: .8rem;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.sap {
    text-decoration: none;
    text-align: center;
    font-size: .8rem;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

/*----------------------------------- PROFILE -----------------------------------*/


.fon {
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}

.pro {
    font-size: 1.3rem;
    padding: .7rem 1.6rem;
    background-color: #ffce1f;
    color: #fff;
    opacity: .9;
    font-weight: bold;
}


.pro1 {
    float: right;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
}

.pro0 {
    float: right;
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

.pro3 {

    font-size: 1.3rem;
    padding: 1rem 1.6rem;
    background-color: red;
    /* background-image: linear-gradient(90deg, #bc7676 0%, #45263f 90%, rgb(30, 38, 50) 100%); */
    font-weight: bold;
    color: #fff;

}

.spa {
    font-size: .9rem;
    padding: 1rem 1.6rem;
    background-color: #ffce1f;
    font-weight: bold;
    color: #fff;

}

.spa1 {
    font-size: 1.1rem;
    padding: .3rem 1.6rem .01rem 1.6rem;
    text-decoration: none;

}

.doco {
    text-decoration: none;
    color: #000;
    opacity: .9;
    font-weight: bold;
}


.spa1:hover {
    background-color: #fbf9f9;
}



/* DROPDOWN */

.dropbtn {
    background-color: #fff;
    font-weight: bold;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    /* padding: 1rem 1.6rem; */
    opacity: .9;
    font-size: 1.1rem;
    padding: .3rem 1.6rem .0rem 1.6rem;

}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 1rem 1.6rem;
}

.dropdown-content a {
    color: black;
    padding: .8rem 5rem;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown .dropbtn:hover {
    background-color: #fbf9f9;
}


/*------------------------------ ORDER ------------------------------*/



.fon1 {
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Crete Round', serif;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;
}


/* Style the tab */
.tab1 {
    overflow: hidden;
    background-color: #0288d1;
    color: white;
    width: 100%;
    text-align: center;
    border: none;
}

.tablinks1 {
    width: 33.33%;
}

/* Style the buttons inside the tab */
.tab1 button {
    background-color: inherit;
    float: left;
    border: none;
    outline: 1px solid red;
    cursor: pointer;
    padding: 14px 16px;
    text-align: center;
    transition: 0.3s;
    font-size: 14px;
    color: #fff;
    opacity: .8;
    font-family: 'Cinzel', serif;
    font-family: 'Cinzel Decorative', cursive;
    font-family: 'Creepster', cursive;
    font-family: 'Electrolize', sans-serif;
    font-family: 'Labrada', serif;
    font-family: 'Lemon', cursive;
    font-family: 'Pathway Gothic One', sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Share Tech Mono', monospace;

}


/* Change background color of buttons on hover */
.tab1 button:hover {
    border-bottom: 2px solid #ffce1f;
    background-color: #ccc;
}
}

/* Create an active/current tablink class */
.tab1 button:active {
    border-bottom: 2px solid #0288d1;
}

/* Style the tab content */
.tab1content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}









/*--------------------------- PROMOTION ---------------------------*/

.cen {
    text-align: center;
    margin: 2rem;
}

.butt1 {
    background-color: #00b0ff;
    color: #fff;
    padding: .8rem;
    text-decoration: none;
    font-size: .8rem;

}

.butt2 {
    background-color: #e0e0e0;
    color: #000;
    padding: .8rem;
    text-decoration: none;
    font-size: .8rem;

}

.tablinks {
    width: 50%;

}



/*------------------------------- RECHARGE -------------------------------*/

.pobu {
    float: right;
    margin-right: 1rem;
    color: #fff;
}

.pobu:hover {
    color: #fff;
}

.note {
    background-color: #fb8c00;
    color: #fff;
    padding: 1.3rem;
    box-shadow: 2px 2px solid black;
    margin-top: .1rem;
    font-size: .9rem;
    border-radius: 1rem;
}

.text1 {
    font-size: 1rem;
    color: red;
    text-align: center;
}

.text2 {
    font-size: 1.5rem;
    opacity: .8;
    color: black;
    text-align: center;
}

.btan1 {
    text-align: center;
    padding: .5rem 1.9rem;
    background-color: #ccc;
    text-decoration: none;
    color: #000;
    font-size: .8rem;
    border: none;
}

.btan1:active {
    background-color: #0288d1;
}

.btan2 {
    background-color: #0288d1;
    padding: .7rem 6.3rem;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    border: none;

}

.pay {
    margin: 2rem;

}

.ho {
    text-decoration: none;
    font-size: .9rem;
    color: #000;
    opacity: .8;
    margin-left: 2rem;
}

.pay p {

    padding: .7rem;
}

.pay p:hover {
    background-color: #e0e0e0;
    padding: .7rem;
}



/*--------------------------------- WITHDRAWAL ---------------------------------*/
.mar {
    margin-left: 1.2rem;
    font-size: 1.4rem;
}

.text11 {
    font-size: 1rem;
    font-weight: bold;
    color: red;
    text-align: center;
    background-color: #ebeaea;
    padding: 1rem;
}

.input-container {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    padding: .5rem;
    border: 2px solid yellowgreen;
    border-bottom-left-radius: 50px 20px;
}

.icon2 {
    padding: 10px;
    background-color: dodgerwite;
    color: black;
    min-width: 50px;
    text-align: center;
    font-size: 1.2rem;
    padding: .5rem;
}

.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    border: none;
}

.input-field:hover {
    border: none;
}

.input-field:active {
    border: none;
}


.input-field:focus {
    border: 2px solid dodgerblue;
}

.wi {
    background-color: #fbf9f9;
    margin-left: 1rem;
    padding: 1rem;

}

.wi:hover {
    background-color: #ccc;
    width: 98%;
    padding: .8rem 0rem .8rem 0rem;
}

.wid {
    padding: 1.6rem;
    text-decoration: none;
    color: #000;
    text-align: center;
}

.dropbtn1 {
    background-color: #fff;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;

}

.dropdown1 {
    width: 100%;
    position: relative;
    display: inline-block;

}

.dropdown-content1 {
    display: none;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content1 a {
    color: black;
    padding: 10px 16px 2px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content1:hover {
    background-color: #f1f1f1
}

.dropdown1:hover .dropdown-content1 {
    display: block;
}

.dropbtn1:hover {
    background-color: #f1f1f1;
}


.bo {
    border-radius: 0px 0px 0px 29px;
}


/* TRANSACTIONS */

.coun {
    text-align: right;
    margin: .2rem 2rem;
    font-size: .9rem;
}

#nub {
    padding: .6rem;
    border: none;
}

option {
    padding: 1rem;
}

/* COMPLAINTS */

.tablinks3 {
    width: 50%;
}

/* ADD BANK CARD  */


.pobu1 {
    float: right;
    font-size: 1.2rem;
    margin-top: .7rem;
    color: #000;
}

.pobu1:hover {
    color: #000;
}

.res {
    display: none;
}






.input {
    position: relative;
}

.input span {
    position: absolute;
    right: 10px;
    bottom: 15px;
    cursor: pointer;
}

/* Input Field Animation */
.inputGroup {
    display: flex;
    flex-direction: column-reverse;
    margin: 1em 0;
}

.inputGroup select {
    margin: 2em 0 0;
}

.inputGroup input {
    background-color: inherit;
    color: #fff;
    font-size: 1em;
    padding: 30px 10px 10px;
    border: none;
    border-bottom: 2px solid #fff;
    outline: none;
}

.inputGroup input::placeholder {
    opacity: 0;
}

.inputGroup select {
    border-bottom: 2px solid #000;
    cursor: pointer;
}

.inputGroup label {
    position: absolute;
    padding-left: 10px;
    margin-bottom: 2px;
    color: #fff;
    cursor: pointer;
    transform: translate(4px, -14px) scale(1.02);
    transform-origin: left top;
    font-family: "Poppins";
    text-transform: uppercase;
    font-weight: normal;
}

.inputGroup input,
.inputGroup label {
    transition: 0.4s all ease;
}

.inputGroup input:focus,
.inputGroup input:not(:placeholder-shown) {
    border-bottom: 2px solid #fff;
}

.inputGroup input:focus~label,
.inputGroup input:not(:placeholder-shown)~label {
    transform: translate(10px, -35px) scale(0.9);
    padding: 0;
    color: #fff;
}

/*--------------------------------- ADD COMPLAINT ---------------------------------*/

select option {
    padding: 5rem;
    font-size: 1.5rem;
    width: 100%;
    padding: 10px;
    outline: none;
    border: none;
}


/*---------------------------------- PRIVACY POLYCE ----------------------------------*/

.poli {
    margin: 1rem;
}

.poli h5 {
    font-weight: bold;
}

.poli h3 {
    font-weight: bold;
}

.poli h6 {
    font-weight: bold;
}



/*---------------- WIN POPUP ----------------*/

/* The popup form - hidden by default */
.form-popup {
    display: none;
    position: fixed;
    bottom: 30;
    top: 20%;
    left: 10%;
    right: 10%;
    border: 3px solid #f1f1f1;
    z-index: 9;
    background-color: white;
}

/* Add styles to the form container */
.form-container {
    width: 100%;
    padding: 10px;
    background-color: white;
}

/* Full-width input fields */
.form-container input[type=text],
.form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background-color: blue;
    color: white;
    padding: 16px 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
    text-align: center;
}

.form-container .btnc1 {
    background-color: rgb(106, 106, 241);
    color: white;
    padding: 16px 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
    text-align: center;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
    width: 20%;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}












.tabone {
    overflow: hidden;
}

/* Style the buttons inside the tab */
.tabone button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border: 2px solid #00b0ff;
}

/* Change background color of buttons on hover */
.tabone button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tabone button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontenton {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

.inc {
    padding: .2rem 1.5rem;
    font-size: 1.7rem;
    border: none;

}

.maz {
    margin: 1vw 5vw;
}