/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 001px) and (max-width: 600px) {
  /* Your CSS here */
  .slcontainer {
    padding: 40px 0px;
  }

  .slogos {
    padding: 5px 20px;
  }

  .slogo1 {
    flex: 0 0 50%; 
    max-width: 50%; 
    padding: 0px 40px; 
    vertical-align: middle;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
  }

  .theme-head-bar.row {
    padding: 70px 50px 30px 10px !important;
  }

  .announcement-body {
    padding: 0px 20px;
  }

  .announcement.news-d-row {
    padding: 28px 20px 0px 20px;
  }

  .theme-contact-page .card-body {
    width: 100% !important;
  }

  .theme-contact-page {
    padding: 25px 30px 30px 30px;
  }

  .theme-contact-page .card-body.extra-padding.p-5 {
    padding: 60px 40px 60px 40px !important;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section {
    max-width: 100%;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section .card-body,
  .user-security-page-main-sec .linked-account-section .card-body,
  .theme-main-inner-page-section .theme-clientarea-security-page .card-body {
    padding: 30px;
  }

  .theme-clientdetail-page {
    padding: 25px 30px 30px 30px;
  }

  .theme-change-password-page .inner-section-change-password {
    padding: 30px;
  }

  .theme-change-password-page {
    margin: 25px 30px 30px 30px;
  }

  .theme-change-password-page .card {
    width: 100% !important;
  }

  .user-security-page-main-sec {
    margin: 25px 30px 30px 30px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 767px) {
  /* Your CSS here */

  .slcontainer {
    padding: 40px 0px;
  }

  .slogos {
    padding: 5px 20px;
  }

  .slogo1 {
    flex: 0 0 50%; 
    max-width: 50%; 
    padding: 0px 50px; 
    vertical-align: middle;
    box-sizing: border-box; 
  }

  .theme-head-bar.row {
    padding: 70px 50px 30px 10px !important;
  }

  .announcement-body {
    padding: 0px 20px;
  }

  .announcement.news-d-row {
    padding: 28px 20px 0px 20px;
  }

  .theme-contact-page .card-body {
    width: 85% !important;
  }

  .theme-contact-page .card-body.extra-padding.p-5 {
    padding: 60px 40px 60px 40px !important;
  }

  .theme-contact-page {
    padding: 35px 40px 40px 40px;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section {
    max-width: 95%;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section .card-body,
  .user-security-page-main-sec .linked-account-section .card-body,
  .theme-main-inner-page-section .theme-clientarea-security-page .card-body {
    padding: 40px;
  }

  .theme-clientdetail-page {
    padding: 35px 40px 40px 40px;
  }

  .theme-change-password-page .inner-section-change-password {
    padding: 30px;
  }

  .theme-change-password-page {
    margin: 35px 40px 40px 40px;
  }

  .theme-change-password-page .card {
    width: 90% !important;
  }

  .user-security-page-main-sec {
    margin: 35px 40px 40px 40px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .slogos {
    padding: 50px 0px;
  }

  .theme-head-bar.row {
    padding: 40px 50px 30px 30px !important;
  }

  .theme-contact-page .card-body {
    width: 80% !important;
  }

  .theme-contact-page {
    padding: 35px 40px 40px 40px;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section {
    max-width: 85%;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section .card-body,
  .user-security-page-main-sec .linked-account-section .card-body,
  .theme-main-inner-page-section .theme-clientarea-security-page .card-body {
    padding: 40px;
  }

  .theme-clientdetail-page {
    padding: 35px 40px 40px 40px;
  }

  .theme-change-password-page {
    margin: 35px 40px 40px 40px;
  }

  .theme-change-password-page .card {
    width: 70% !important;
  }

  .user-security-page-main-sec {
    margin: 35px 40px 40px 40px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* Your CSS here */

  .slogos {
    padding: 50px 0px;
  }

  .theme-contact-page .card-body {
    width: 75% !important;
  }

  .theme-contact-page {
    padding: 45px 50px 50px 50px;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section {
    max-width: 75%;
  }

  .theme-main-inner-page-section .main-card-accountdetail-section .card-body,
  .user-security-page-main-sec .linked-account-section .card-body,
  .theme-main-inner-page-section .theme-clientarea-security-page .card-body {
    padding: 50px;
  }

  .theme-clientdetail-page {
    padding: 45px 50px 50px 50px;
  }

  .theme-change-password-page {
    margin: 45px 50px 50px 50px;
  }

  .theme-change-password-page .card {
    width: 60% !important;
  }

  .user-security-page-main-sec {
    margin: 45px 50px 50px 50px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* Your CSS here */
  .theme-contact-page .card-body {
    width: 65% !important;
  }

  .theme-change-password-page .card {
    width: 50% !important;
  }
}

/* Breakpoint for Header */


.two-factor-available-section .card-body {
  padding: 30px;
  background: #fff;
}

.dropdown.user.user-menu a.dropdown-toggle i:hover {
  background: #fff;
  color: #fe9900 !important;
}

.user-icone i {
  border: solid 2px #fff;
  color: #545454;
  cursor: pointer;
}

.user-icone i:hover {
  background: #545454;
  border: solid 2px #545454;
  color: #fff;
}

.theme-change-password-page .card {
  background: #fff;
}

/*WGS Front End CSS Starts From Here*/