@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Sacramento&family=Sora:wght@200;300;400;500;600;700&display=swap');
body{ margin: 0px; font-family: 'Open Sans', sans-serif; color: #111111; background: #f5f7fa;}
h2, h4, h5, h6{font-family: 'Sora', sans-serif;}
.top-header{ width: 100%; float: left; background: #292d33; padding: 15px 0px 0px; color: #ffffff;}
.top-header h5{font-size: 1.4rem; font-weight: 400; margin: 10px 0 0;}
.top-header h6{font-size: 1.25rem; padding: 0px; margin: 0px;}
.top-header p{ margin-bottom: 0px;}
.space-remove{ padding: 0px;}
.top-header ul{ padding: 0px; margin: 10px 0 0; }
.top-header li{ list-style-type: none; list-style: none; margin-left: 15px; display: inline-block; position: relative;}
.top-header li .noti{ position: absolute; width: 18px; height: 18px; line-height: 1.3; right: -3px; font-size: .85rem; font-weight: 500; text-align: center;  border-radius: 50%; background: #de192e; color: #ffffff; top: 3px;}
.top-header li img{ width: 30px;}
.main-menu{ width: 100%; float: left; background: #fff; border-bottom: solid 1px #ccc; padding: 20px 0px; margin-top: 15px!important;}
.main-menu ul{ padding: 0px; margin: 0px;}
.main-menu .navbar{ padding: 0px;}
.breadcrumb{ background: none; margin: 0px; padding: 0px; width: 100%; float: left;}
.breadcrumb ul{ margin: 0px; padding: 15px 0 0 0;}
.breadcrumb li {display: inline-block; list-style: none; color: #8c2129; font-size: 13px;}
.breadcrumb li a{color:#de192e}
.breadcrumb li:after {content: "";padding-left: 10px; margin-left: 10px; color: #012169; background: url(../images/arrow.png) no-repeat left 3px; background-size: 6px;}
.breadcrumb li:last-child:after{content: ""; padding: 0px;}
.login-page-area{ background: url(../images/business.jpg) no-repeat center top; width: 100%; float: left; padding: 100px 0px 50px; background-size: cover;}
.admin-login-form{ width: 50%; float: left; background: #fff;  box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.20); padding: 25px 4rem 50px; margin: 0px 25%; border-radius: 40px;}
.admin-login-form i{ text-align: center; width: 100%; display: inline-block;}
.admin-login-form i img{ width: 110px; margin-top: -75px; margin-bottom: 20px; border: solid 5px #fff; border-radius: 50%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.20);}
.admin-login-form label{ font-size: 16px; font-weight: 400; color: #000;}
.login-page-area .form-group{ margin-bottom: 20px; display: inline-block; width: 100%;}
.admin-login-form .normal-search-btn{ background: #de192e; border-radius: 35px; text-transform: uppercase; letter-spacing: 1px; color: #fff; width: 100%; padding: 20px 20px; font-weight: 600; font-size: 16px;}
.admin-login-form h1{font-size: 2rem; font-family:'Times New Roman', Times, serif; letter-spacing: 1px; font-weight: 700; text-align: center; color: #de192e; margin: 0px 0px 20px;}
.admin-login-form .form-control{background: #f5f7fa; padding: 14px 20px; border-radius: 25px; border:none}
.admin-login-form label{ font-weight: 700;}
.latest-info{width: 100%; float: left; display: grid; grid-gap:25px; grid-template-columns: repeat(3, calc(33.33% - 15px)); margin: 50px 0px;}
.latest-info .u-item{ width: 100%; box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.40); padding: 20px 30px 15px; background: #fff; color: #000; text-align: center;}
.latest-info .u-item a{ color: #de192e;}
.latest-info .u-item h5{ font-weight: 700; font-size: 1.5rem; border-bottom: solid 2px; display: inline-block; margin-bottom: 20px;}
.latest-info .u-item:nth-child(1){background-image: linear-gradient(#de192e, #ae0b1c); color: #fff;}
.latest-info .u-item:nth-child(1) .more{ color: #fff; }
.latest-info .u-item td{ text-align: left; font-size: 1.125rem; padding: 3px 0px;}
.latest-info .u-item td:nth-of-type(2n){ text-align: right;}
.latest-info .u-item .more{ text-align: right; width: 100%; display: inline-block; margin-top: 20px; font-weight: 700; text-transform: uppercase; font-size: 0.875rem;}
.white-bg{ background: #fff;}
.latest-project{ width: 100%; float: left; padding: 0px 0px 50px;}
.latest-project h4{ font-weight: 700; padding: 15px 50px;}
.latest-project h4 a{ text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 10px 30px; font-size: 1rem; background: #c81729; color: #fff; float: right; }
.latest-project form{ width: 100%; padding: 15px 50px; border-top:solid 2px #f5f7fa; border-bottom:solid 2px #f5f7fa; display: inline-block;}
.latest-project .form-control2{ border: solid 1px #b3b3b3; padding: 10px 20px; width: 60%;}
.latest-project .submit-btn{box-shadow: 1px 2px 2px 0 rgb(128 128 128); padding: 10px 31px 10px 29px; border: none; margin-left: 10px; cursor: pointer;}
.latest-project th{font-size: 1.25rem; font-weight: 700; padding: 20px 0px;}
.latest-project table{ width: 100%; float: left;}
.inline-form {width:auto!important;display: inline!important;padding: 0px!important;}
.hand {cursor: pointer;}

.latest-project tr{ padding: 20px 0px;}
.latest-project tr:nth-child(odd){ background: #f5f7fa;}
.latest-project td{ font-size: 1.15rem;}
.latest-project tr:nth-child(odd) .wrapper input + label::before{ background: #fff; border:none}
.latest-project tr:nth-child(even) .wrapper input + label::before{ background: #f5f7fa; border:solid 1px #ededed}
.latest-project .inactive{ background: #de192e; color: #ffffff; display: inline-block; padding: 5px 0px; min-width: 125px; text-align: center; font-size: 1.15rem;}
.latest-project .inreview{ background: #478ac9;}
.latest-project .active{ background: #2cccc4;}
.latest-project .icon{background: #fff; width: 42px; padding: 5px; margin-right: 5px;}
.latest-project tr:nth-child(even) .icon{ background: #f5f7fa;}
.view-all{text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 10px 30px; font-size: 1rem; background: #c81729; color: #fff; float: left; margin: 30px 0px 0px 40px; }
.latest-project .pagination{ float: right;}
.latest-project .pagination a{ color: #000;}
.page-link{padding: 0.5rem 1rem;}
.project-management{width: 100%; float: left; border-bottom: solid 1px #e0e5eb; padding: 50px 0px 75px;}
.project-management h5{font-size: 2.15rem; font-weight: 700; color: #000; margin-bottom: 25px;}
.project-management ul{padding: 0px; margin: 0px;  display: grid; grid-template-columns: repeat(3, calc(33.3% - 50px)); grid-gap: 50px;}
.project-management li{list-style-type: none; list-style: none; background: #fff; padding: 17px;     box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.40);}
.project-management li a{ font-size: 1.5rem; font-weight: 700; color: #000;}
.project-management li a:hover{ text-decoration: none;}
.project-management li:hover h5{ color: #de192e!important; text-decoration: none;}
.project-management li .icon{ width: 73px; height: 73px; background: #de192e; display: inline-block; text-align: center; float: left; margin-right: 20px;}
.project-management li .icon img{ width: 73px; padding: 12px;}
.project-management li h5{ font-size: 1.5rem; display: flex; align-items: center; height: 100%;}
.tab-form-area{ width: 100%; float: left; margin-top: 50px;}
.tab-form-area h1{ color: #de192e; font-size: 2.25rem; font-weight: 700;}

.tab-form{ width: 100%; float: left; background: #fff; margin-top: 30px; padding-bottom: 30px;}
.nav-tabs {display:none;}

.tab-form .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ border: none; background: #de192e; color: #fff;}
.tab-form  .card-body{ display: inline-block; width: 100%;}
.tab-form .nav-tabs .nav-link{ border-radius: 0px;}
.tab-form .nav-item a{ color: #000; font-size: 1.5rem; font-family: 'Sora', sans-serif; font-weight: 700;}
.tab-form .nav-tabs .nav-item{ width: 25%; text-align: center;}
.tab-form .nav-link{ padding: 20px 0px;}
.tab-form label{ font-size: 1.125rem; min-width: 15%; font-weight: 700; display: inline-block; margin-top: 12px; padding-right: 20px;}
.tab-form .form-control{width: 84%; display: inline-block; height: auto!important; padding: 15px 10px; background: #f5f7fa; border: none; border-radius: 0px;}
.tab-form p{ width: 100%; display: inline-block;}
.tab-form select{-moz-appearance: none !important; -webkit-appearance: none !important; -o-appearance: none !important; position: relative;}
.down-arrow{ position: relative;}
.down-arrow:after{content:"";border: solid black;
  border-width: 0 2px 2px 0; position: absolute;
  display: inline-block; right: 23px; top: 8px;

  padding: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);}

  .save-continue{ background: #de192e; margin-left: 15px; color: #fff!important; margin-top: 40px; font-weight: 700; padding: 10px 20px; display: inline-block; float: right; text-transform: uppercase; letter-spacing: 1px;}

.tab-form .form-group{width: 100%; float: left; margin-top: 20px;}
.tab-form .two-rows{ width: 100%; float: left;}
.tab-form .two-rows label{ width: 32%; float: left;}
.bs-searchbox .form-control{ float: left; padding: 5px 10px!important;}
.tab-form .two-rows .form-control{ width: 67%;}
.tab-form .remove-btn{ margin-left: 32%; font-weight: 700; color: #000; border-bottom: solid 1px #000;}
.tab-form .remove-btn:hover{ text-decoration: none; color: #007bff;}
.tab-form .bootstrap-select{ width: 67%!important;}

.tab-form .btn{ padding: 15px 15px;}

.tab-form .dropdown-toggle::after{  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block; margin-top: -10px!important;
  padding: 10px;   transform: rotate(45deg);
  -webkit-transform: rotate(45deg);}

.mb-0 a{ color: #de192e; font-weight: 700;}

@media(min-width:768px) {
  .nav-tabs {
      display: flex;
  }

  .card {
      border: none;
  }

  .card .card-header {
      display:none;
  }

  .card .collapse{
      display:block;
  }
}

@media(max-width:767px){
  .tab-pane {
      display: block !important;
      opacity: 1;
  }
}
.footer{ width: 100%; float: left; background: #292d33; padding: 15px 0px; text-align: center; color: #fff; font-size: 14px; margin-top: 50px;}
.footer p{ margin: 0px;}
	@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {


      .latest-project  td{
          display: block; padding: 15px 0px;
      }

      /* Hide table headers (but not display: none;, for accessibility) */
      .latest-project thead tr {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }

      .latest-project tr {
    margin: 0 0 1rem 0;
  }

  .latest-project tr:nth-child(odd) {
    background: #f5f7fa;
  }
  .latest-project td:first-child{ padding-left: 0px;}
  .latest-project td {
          /* Behave  like a "row" */
          border: none;
          border-bottom: 1px solid #eee;
          position: relative;
          padding-left: 50%;
      }

      .latest-project td:before {
          /* Now like a table header */
          position: absolute;
          /* Top/left values mimic padding */
          top: 0;
          left: 6px; padding: 15px;
          width: 45%;

          white-space: nowrap;
      }


      .latest-project td:nth-of-type(1):before { content: ""; }
      .latest-project td:nth-of-type(2):before { content: "Project Name"; }
      .latest-project td:nth-of-type(3):before { content: "Date"; }
      .latest-project td:nth-of-type(4):before { content: "Status"; }
      .latest-project td:nth-of-type(5):before { content: "Action"; }

  }





.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*create check symbol with pseudo element*/
.wrapper input + label::after {
  content: "";
  border: 4px solid;
  border-left: 0;
  border-top: 0;
  height: 20px;
  left: 14px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(45deg);
  transition: opacity 0.2s ease-in-out;
  width: 12px;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles—commented out for the tutorial, but you’ll need to add them for proper use
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;
  outline: 3px solid transparent;
}*/



/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem; display: inline-block;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 30px 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 50px;
  position: absolute;
  top: 0;
  width: 40px;
}

/*create check symbol with pseudo element*/
.wrapper input + label::after {
  content: "";
  border: 4px solid #de192e;
  border-left: 0;
  border-top: 0;
  height: 20px;
  left: 64px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(45deg);
  transition: opacity 0.2s ease-in-out; color: #de192e;
  width: 12px;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}



@media screen and (max-width: 767px) {
    .latest-info{grid-template-columns: repeat(1, calc(100% - 0px));}

.top-header .text-center{ text-align: left!important;}
.top-header h5{ margin: 10px 0px 10px;}
.latest-project form{ padding: 10px 15px;}
.latest-project .form-control2{ margin-top: 10px;}
.latest-project form .text-right{ float: left!important; text-align: left!important;}
.project-management ul{grid-template-columns: repeat(2, calc(50% - 15px)); grid-gap: 30px;}
.tab-form label{ min-width: 100%;}
.tab-form .form-control{ width: 100%;}
.tab-form .card-body{ padding: 0px 0px 30px;}
.tab-form .form-group{ margin: 10px 0px;}
.tab-form .two-rows label{ width: 100%;}
.tab-form .bootstrap-select{ width: 100%!important;}
.tab-form .two-rows .form-control{ width: 100%!important;}
.save-continue{ float: left; margin-left: 15px; margin-top: 15px;}
.tab-form .remove-btn{ margin-left: 0;}
.admin-login-form{ width: 100%; float: left; margin: 0; padding: 25px;}

}

@media screen and (max-width: 480px) {

  .project-management ul{grid-template-columns: repeat(1, calc(100% - 0px)); grid-gap: 30px;}
}