File "style.css"

Full path: /home/fsibplc/public_html/css/style.css
File size: 7.32 B (7.32 KB bytes)
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: "Circular Std Book";
  /* src: url(assets/fonts/FontsFree-Net-Circular-Std-Book.ttf); */
  src: url(FontsFree-Net-Circular-Std-Book.ttf);
}

html,
body {
  font-family: "Circular Std Book";
  /*font-style: normal;*/
  /*font-weight: normal;*/
  /*font-size: 14px;*/
  /*color: #71748d;*/
  /*background-color: #efeff6;*/
  /*-webkit-font-smoothing: antialiased;*/
}

.card {
  width: 80%;
  margin: 0 auto;
}
.card-container {
}

.card-header {
  color: #035fbb;
  font-size: 18px;
  font-weight: 600;
}
.form-subheading {
  font-size: 16px;
  color: #035381;
  font-weight: 600;
  /* text-decoration: underline; */
}
.form-label {
  font-size: 15px;
  color: #22078f;
  font-weight: 500;
}
.form-control,
.form-select {
  font-size: 13px;
  font-weight: 400;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

/* Table styling */
.table {
  margin: 0 auto;
  padding: 100px;
  /* box-shadow: 10px 5px 0px 20px #28a745; */
}
.table tr th {
  background-color: #122558;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  text-wrap: nowrap;
}
.table tbody tr td {
  padding: 10px;
}
.table tbody tr td button {
  border: none;
  background-color: none;
  color: none;
  text-align: center;
}
.table tbody tr td button i {
  color: #122558;
}

/*foreign_corener*/

.foreign_service_container {
  /*font-family: Arial, sans-serif;*/
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Center content vertically */
  /*height: 50vh;*/
  margin: 0;
  padding: 60px 20px; /* Add some padding */
}

.foreign_service_container .card-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping of cards */
  gap: 20px; /* Space between cards */
  justify-content: center; /* Center the cards */
}

.foreign_service_container .card-container .card {
  background-color: #f7f9ff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  /*flex: 1 1 200px; */
  /*min-width: 500px; */
  /*max-width: 550px; */
}

.foreign_service_container .image-container {
  display: flex;
  justify-content: center;
  gap: 0px; /* Space between images */
}

.foreign_service_container .card img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 4px;
}

.card-container {
  margin: 20px 5px;
}



/* new */
body {
  background-color: #f4f7fa;
}

.sidebar {
  background: #faffff;
  color: black;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 60px;
  width: 250px;
  /* margin-top: 60px; */

  /* margin-left: 10px; */
  padding: 25px 5px 10px;
  /* border-radius: 5px; */
  box-shadow: 0 5px 1px rgb(226 234 255 / 44%), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sidebar a {
  font-size: 15px;
  font-weight: 700;
  color: #324373;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #e9eaf0;
}

.sidebar a:hover,
.sidebar .submenu a:hover {
  /* background: #778ced; */
  background-color: #183d59;
  color: #ffffff;
}

.sidebar a i {
  /* color: #94ddff; */
  font-size: 17px;
  margin-right: 5px;
}

.sidebar .submenu {
  padding-left: 30px;
  display: none;
  /* Hidden by default */
}

.sidebar .submenu a {
  font-size: 14px;
  color: #5129a0;
  font-weight: 600;
}

.sidebar .submenu a i {
  font-size: 15px;
}

.content {
  margin-left: 260px;
  padding: 20px;
}
.show-content {
  margin-left: 290px;
  margin-top: 80px;
  padding: 20px;
}
.show-content .form-group {
  padding-left: 15px;
  padding-right: 15px;
}
.details-content {
  margin-left: 260px;
  padding: 0px 20px 20px 20px;
}

.topbar {
  background: #324373;
  /* background: #183d59; */
  color: white;
  padding: 10px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0px;
  /* Align with the sidebar */
  z-index: 1000;
  /* Ensure it stays on top */
  margin-bottom: 10px;
  /* Gap between topbar and sidebar */
  height: 60px;
  text-align: center;
}

.card {
  margin: 20px 20px 0px 0px;

  cursor: pointer;
  width: 300px;
  /* Change cursor to pointer */
  box-shadow: 0 1px 1px rgb(226 234 255 / 44%), 0 4px 10px rgba(0, 0, 0, 0.1);
  /* text-align: center; */
  border-radius: 1px;
}
.card .left {
  text-align: center;
}

.card-focus {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
  /* color: #7e8be0; */
  color: #7a8af0;

  /* font-style: italic; */
}

.card-title {
  font-size: 17px;
  font-weight: 500;
  /* margin-bottom: 4px; */
}

.card-subtitle {
  font-weight: 600;
}

.profile-icon {
  float: right;
  font-size: 1.5em;
  margin-left: 15px;
  cursor: pointer;
}

.dropdown-menu {
  right: 0;
  left: auto;
}

.table-container {
  padding: 15px;
  box-shadow: 0 10px 1px rgb(226 234 255 / 64%), 0 4px 10px rgba(0, 0, 0, 0.25);
  background-color: #faffff;
}

.user-table {
  display: none;
  /* margin-top: 20px; */
}

.table thead tr th {
  background-color: #9ebef0;
  /* background-color: #324373; */
  color: #131414;
  /* color: #f4f7fa; */
  font-weight: 600;
}

footer {
  position: fixed;
  bottom: 0;
  right: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  background-color: #f4f7fa;
  z-index: 100;
}

footer p {
}

footer p span {
  color: #324373;
  text-transform: uppercase;
}
.form-control:hover {
  border: 1px solid green;
  box-shadow: none;
}

.row img {
  width: 200px;
  height: 130px;
  margin-top: 10px;
}
strong {
  color: #184247;
  font-size: 14px;
  font-weight: 700;
  margin-right: 3px;
}

.form-control {
  cursor: auto;
}
.form-select {
  cursor: pointer;
}

.ac_open_container {
  width: 60%;
  margin: 0 auto;
}
.ac_open_container .card-header{
  font-size: 22px;
  letter-spacing:0.2px;
  word-spacing:2px
}
.ac_open_container .card-body{
  padding: 3rem;
}
.card .input_group{
  margin-bottom:1.5rem;
}




/* Responsive styles */
@media (max-width: 768px) {
  .ac_open_container{
    width: 95%;
  }
  .ac_open_container .card-header{
    font-size: 16px;
  }
  .ac_open_container .card-body{
    padding: 1rem;
  }
  .card .input_group{
    margin-bottom:0.5rem;
  }
  .form-subheading {
    font-size: 13px;
    color: #035381;
    font-weight: 600;
    /* text-decoration: underline; */
  }
  .form-label {
    font-size: 12px;
    color: #22078f;
    font-weight: 500;
  }

  .form-control,
  .form-select {
    font-size: 11px;
    font-weight: 400;
  }



  .select2-container {
    width: 100%;
  }

  .foreign_service_container .card-container {
    flex-direction: column; /* Stack cards in a column on small screens */
    align-items: center; /* Center the cards */
    padding: 10px 30px;
  }

  .foreign_service_container .image-container {
    flex-direction: column; /* Stack images in a column on small screens */
  }

  .foreign_service_container {
    padding: 10px; /* Reduce padding on smaller screens */
  }
  .foreign_service_container .card img {
    width: 60%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px;
  }
}