* {  box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
}
.row::after {
    content: "";
    clear: both;
    display: table;

}
[class*="col-"] {
    float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* Extra small devices (phones, 600px and down) */
  /* Extra small devices (phones, 600px and down) */
#open_filter_btn{
  width: fit-content;
  border: none;
  color: darkblue;
  font-weight: bold;
  background: transparent;
     }
      #new_post_window{
      width: 100%;
      padding: 2%;
      display: none;
     }
      .cancel_new_post_btn{
        width: 100%;
        text-align: center;
        background: red;
        color: white;
        border: 1px solid red;
        height: 40px;
        font-weight: bold;
        margin-top: 4%;
        margin-bottom: 5%;
      }
      .cancel_new_post_btn:hover{
        background: white;
        color: red;
      }
      .control_btn_new_post{
        margin-bottom: 4%;
      }
      .control_btn_new_post button{
        width: 100%;
        border: none;
        background: transparent;
        height: 30px;
      }
      .post_types{
        display: none;
      }
      .step2{
        display: none;
      }
      .mobile_payment{}
      .mobile_payment .card{
        width: 100%;
        padding: 2%;
        border: 1px solid grey;
        box-shadow: 2px 2px 10px;
        background: ghostwhite;
        margin-bottom: 5%;
      }
      .mobile_payment .card .top{
        width: 100%;
      }
      .mobile_payment .card .top img{
        width: 100%;
      }
      .mobile_payment .card .bottom table{
        width: 100%;
      }
      .mobile_payment .card .bottom table tr th{
        text-align: left;
        font-size: 20px;
      }
      .mobile_payment .card .bottom table tr td{
        text-align: left;
        font-size: 20px;
      }
      .payment_instruction{
        padding: 2%;
      }
      #back_step1_btn{
         width: 100%;
        text-align: center;
        background: red;
        color: white;
        border: 1px solid red;
        height: 40px;
        font-weight: bold;
        margin-top: 4%;
        margin-bottom: 5%;
      }
      .propert_type_heading{
        font-size: 30px;
        margin-bottom: 4%;
        width: 100%;
        padding: 1%;
        text-align: center;
      }
      .payment_method_heading{
        margin-bottom: 4%;
        width: 100%;
        padding: 1%;
        text-align: center;
      }
      #my_post_btn{
        color: black;
        background: white;
        border: 2px solid darkblue;
      }
      .propert_type_heading{
        font-size: 30px;
        margin-bottom: 4%;
        width: 100%;
        padding: 1%;
        text-align: center;
      }
      .payment_method_heading{
        margin-bottom: 4%;
        width: 100%;
        padding: 1%;
        text-align: center;
      }
      .form_popup{
        display: none;
        padding-top: 20%;
        text-align: center;
        width: 100%;
        background: white;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
      }
      .form_popup p{
        margin-bottom: 10%;
        padding: 2%;
      }
      .form_popup p button{
        width: 100%;
        text-align: center;
        background: green;
        color: white;
        height: 40px;
        margin-top: 4%;
      }
      .form_popup_close_btn{
    position: absolute;
    top: 2%;
    right: 4%;
    color: red;
    font-size: 20px;
    background: white;
    border: none;
      }
      .next_to_payment_btn{
        width: 100%;
        text-align: center;
        background: green;
        color: white;
        height: 40px;
        margin-top: 4%;
      }
      #verify_btn_house{
        width: 100%;
        text-align: center;
        background: green;
        color: white;
        height: 40px;
        margin-top: 4%;
      }
       #verify_btn_room{
        width: 100%;
        text-align: center;
        background: green;
        color: white;
        height: 40px;
        margin-top: 4%;

      }
      #verify_btn_frem{
        width: 100%;
        text-align: center;
        background: green;
        color: white;
        height: 40px;
        margin-top: 4%;
      }
      #back_step1_btn_house{
         width: 100%;
        text-align: center;
        background: red;
        color: white;
        border: 1px solid red;
        height: 40px;
        font-weight: bold;
        margin-top: 4%;
        margin-bottom: 5%;
      }
      #back_step1_btn_room{
         width: 100%;
        text-align: center;
        background: red;
        color: white;
        border: 1px solid red;
        height: 40px;
        font-weight: bold;
        margin-top: 4%;
        margin-bottom: 5%;
      }
      #back_step1_btn_frem{
         width: 100%;
        text-align: center;
        background: red;
        color: white;
        border: 1px solid red;
        height: 40px;
        font-weight: bold;
        margin-top: 4%;
        margin-bottom: 5%;
      }
      #available_btn_house{
        background: transparent;
        border: none;
        margin-right: 4%;
        font-weight: bold;
      }
      #change_available_btn_house{
        background: darkblue;
        color: white;
        border: none;
        border-radius: 20px;
        padding: 1%;
      }
       #available_btn_room{
        background: transparent;
        border: none;
        margin-right: 4%;
        font-weight: bold;
      }
      #change_available_btn_room{
        background: darkblue;
        color: white;
        border: none;
        border-radius: 20px;
        padding: 1%;
      }
      #available_btn_frem{
        background: transparent;
        border: none;
        margin-right: 4%;
        font-weight: bold;
      }
      #change_available_btn_frem{
        background: darkblue;
        color: white;
        border: none;
        border-radius: 20px;
        padding: 1%;
      }
      #profile_window{
        position: relative;
        display: none;
        margin-top: 5%;
      }
      #profile_window h1{
        width: 100%;
        padding: 1%;
        text-align: center;
      }
      .profile_div{
      width: 100%;
      margin-top: 8%;
      padding: 2%;
      text-align: center;
     }
     .profile_div label{
      color: darkblue;
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 2%;
     }
     .profile_div input{
      font-size: 20px;
      width: 100%;
      height: 35px;
      display: block;
      border: none;
      border-bottom: 1px solid black;
      background: white;
      text-align: center;
     }
     .profile_div button{
      background: green;
      color: white;
      padding: 1%;
     }
     .change_password_link_div{
      overflow: auto;
      margin-top: 4%;
      margin-bottom: 2%;
      width: 100%;
      text-align: center;
     }
     #change_password_link{
      text-decoration: none;
      font-size: 20px;

     }
     #change_password_div{
      padding: 1%;
      margin: 4%;
      background: ghostwhite;
      display: none;
     }
     #main_wrapper{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: black;
      opacity: 0.3;
     }
     .x_btn_red_top_right{
      position: absolute;
    top: 2%;
    right: 4%;
    color: red;
    font-size: 20px;
    background: white;
    border: none;
    width: fit-content;
     }
     #about_us_window{
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      padding: 5%;
      background: white;
      text-align: center;
      overflow: scroll;
     }
     #about_us_window p{
      margin: 5%;
     }
     .company_name{
      color: darkblue;
     }
     .tupangishe_dp_about{
      margin-bottom: 20%;
     }
     .tupangishe_dp_about img{
      border: 2px solid darkblue;
      border-radius: 100%;
      max-width: 70%;
     }
     .tupangishe_dp_about label{
      display: block;
      font-family: verdana;
      color: darkblue;
     }
     #delete_account_container{
      display: none;
      width: 80%;
      position: fixed;
      top: 20%;
      left: 10%;
      background: white;
      border: 2px solid darkblue;
      padding: 2%;
      z-index: 5;
     }
     #delete_account_container div{
      margin-top: 10%;
      margin-bottom: 10%;
     }
     #delete_account_container table{
      width: 100%;
      text-align: center;
     }
     #delete_account_container table button{
      border: none;
      background: transparent;
     }
     #request_code_btn{
      background: darkblue;
      color: white;
      border: none;
      padding: 1%;
     }
     #request_code_btn2{
      background: darkblue;
      color: white;
      border: none;
      padding: 1%;
     }
     #request_code_btn3{
      background: darkblue;
      color: white;
      border: none;
      padding: 1%;
     }
     #mycash{
      position: absolute;
      top: 0;
      right: 0;
      padding: 1%;
      font-weight: bold;
      font-size: 11px;
     }
     .kwa_majaribio{
      margin-top: 5%;
      color: darkblue;
     }
.share_div{
      position: absolute;
      bottom: 0;
      right: 0%;
      height: 50px;
      width: 30%;
      padding-top: 5%;
      text-align: right;
      padding-right: 2%;
     }
     .share_div a{
      text-decoration: none;
      height: 20px;
      color: black;
      padding: 2%;
     }
     .share_div img{
      height: 16px;
      width: 20px;
      margin-left: 2px;
     }

     .preview_container{
      width: 50%;
     }
     .preview_container img{
      width: 100%;
     }



      #notification_window{
        padding: 1%;
        background: whitesmoke;
      }
     .notification_card{
      padding: 2%;
      margin-bottom: 5px;
      border: 1px solid gray;
      box-shadow: 1px 1px 5px -2px;
      background: white;

     }
     .source_image{
      text-align: center;
     }
     .source_image img{
      width: 30px;
      height: 30px;
      border-radius: 20%;
     }
     .content_and_time{
     }
     .content_and_time .content{
      margin-bottom: 2px;
     }
     .date_and_time{
      font-size: 11px;
     }
     .notification_action{
     }
     .notification_action ul{
      list-style: none;
      width: 100%;
     }
     .notification_action ul li{
      display: inline;
      height: 15px;
      width: 15px;
      float: right;
      margin-left: 15%;
     }
     .delete_notification img{
      height: 15px;
      width: 15px;
     }
     .mark_as_read img{
      height: 15px;
      width: 15px;
     }
     .check_notification input{
      height: 15px;
      width: 15px;
     }
     
     .window_label{
      font-weight: bold;
     }
     .notification_controller{
      padding: 2%;
      padding-top: 4%;
      padding-bottom: 4%;
      background: whitesmoke;
     }
     .notification_controller_action{
     }
     .notification_controller_action ul{
      list-style: none;
      width: 100%;
     }
     .notification_controller_action ul li{
      display: inline;
      height: 20px;
      float: right;
      margin-left: 5%;
     }
     .delete_all_read{
      cursor: pointer;
     }

     #cash_withdrawal_container{
      display: none;
  width: 90%;
  position: fixed;
  top: 10%;
  left: 5%;
  background: white;
  padding: 2%;
  z-index: 5;
     }
     #cash_withdrawal_container div{
      text-align: center;
     }
     #cash_withdrawal_container div p{
      margin-top: 2%;
     }
     #cash_withdrawal_container div p input,button{
      text-align: center;
      padding: 1%;
     }
     #cash_withdrawal_container div p button{
      text-align: center;
      padding: 1%;
      background: blue;
      margin-bottom: 5%;
      border: none;
     }

     #withdrawal_content_x_btn{
   width: fit-content;
  position: absolute;
  top: 1%;
  right: 4%;
  border: none;
  color: red;
  background: transparent;
  font-size: 25px;
}