table {
  background-color: #FFFFFF !important;
}

.sm-labels {
  font-weight: bold;
}

h3.info{
    text-align: center;
    padding: 10px 0px;
    background: linear-gradient(40deg,#2096ff,#2799fb)!important;
    color: #fff;
    color: #fff;
    font-weight: bold;
    margin: 20px auto;
    box-shadow: 0px 5px 7px #82848566;          
}
p.report-stat.red{  background: linear-gradient(40deg,#db3414,#dd9292)!important;}
p.report-stat.blue{ 
  background: -webkit-linear-gradient(50deg,#ff6ec4,#7873f5)!important;
    background: linear-gradient(40deg,#ff6ec4,#7873f5)!important
}
p.report-stat{
  font-size: 53px;
  padding: 10px;
  border-radius: 100%; 
  color: #fff;
  font-weight: bold;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 0px auto;
}
.main_tb_head {
  background: #32373c;
  color: #fff;
}
.cip_heading h1 {
  color: #fff;
}
#office-clock-div a.nav-link.active {
  color: #080808!important;
  font-weight: 500!important;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
}
.main_tb_head th, .table > tbody > tr.success > td
{
  background-color:transparent!important;
}
.success.sunday_tb {
  color: #f60d0d;
  font-weight: 600;
}
.get_report_btn
{
  color: #fff;
    background: -webkit-linear-gradient(50deg,#2096ff,#05ffa3)!important;
    background: linear-gradient(40deg,#2096ff,#05ffa3)!important;
    border: 0;
    border-radius: 18px;
    font-size: 15px;
}
tr {
    border: 0;
    border-bottom: 1px solid #cccccc8c;
}
.btn-danger.custom_download {
    color: #fff;
    /* background-color: #d9534f; */
    /* border-color: #d43f3a; */
    background: -webkit-linear-gradient(50deg,#ff8888,#8f8bf7);
    background: linear-gradient(40deg,#fe0808e8,#1d36c1);
    border: 0;
}
.custom_download i.fa.fa-download {
    margin-right: 6px;
}

.custom_btn_atten
{
  background: -webkit-linear-gradient(50deg,#45cafc,#303f9f)!important;
    background: linear-gradient(40deg,#45cafc,#303f9f)!important;
    border: 0;
    box-shadow: 3px 4px 12px #9f9f9ab3;
}

/*---features-style---*/
.cs-top {
    background: #090b0ccc;
    display: block;
    font-size: 14px;
    padding: 10px 10px;
}

.cip-desc li {
    display: block;
    font-size: 18px!important;
    padding: 5px;
}

.cip-desc li:hover{
    background: rgb(23, 115, 189);
      transition: .2s ease;
}

.cip-desc li::before {
    content: "\f007";
    font-family: Font Awesome\ 5 Free;
    padding-right: 10px;
    height: 80px;
}

.pro-features-logo-titel img {
    width: 160px;
    margin: 0 auto;
}

.pro-features-logo-titel h2 {
    font-size: 54px;
    font-weight: bold;
}
.pro-features-logo-titel p {
    font-size: 16px;
    color: #32373c;
}

.col-md-4.pro-features-logo-titel.text-center {
    background: #fff;
    border-radius: 10px;
    padding-top: 12px;
}

.col-md-4.pro-features-list {
    padding-top: 16px;
    padding-left: 60px;
}

.container-fluid.pro-features-cont {
    background: #32373c;
    color: #fff;
    padding: 35px 20px;
    padding-bottom: 15px;
    margin-top: 1%;
    margin-bottom: 2%;
    box-shadow: 0px 0px 14px 0px rgba(0, 33, 60, 0.17);
    border-radius: 10px;
}

a.btn.download-pro {
    color: #ffffff;
    font-size: 20px;
    background: #32373c;
    text-transform: capitalize;
    border-radius: 10px;
    box-shadow: 1px 1px 9px #c9c9c9;
    padding-bottom: 9px;
}
/*---/features-style---*/

/*--addnew--*/
.clock-group-btn button {
    padding: 13px 18px;
    font-size: 18px;
    color: #fff;
}
div#wpbody-content {
  padding-right: 20px;
}

.digit {
  position: relative;
  float: left;
  width: 57px;
  height: 77px;
  background-color: #fff;
  border-radius: 9px;
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 47px;
  margin-right: 6px;
}

.digit.hour {
  margin-right: 24px;
}

.digit.min {
  margin-right: 24px;
}
.digit.sec {
  margin-right: 24px;
}
.base {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #333;
}

.cip_free .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 3px 2px 20px 0px rgba(126, 123, 123, 0.5);
    border: 0;
}
.cip_heading.modal-content {
    background-color: royalblue;
    color: #fff;
    padding-top: 1px;
    padding-bottom: 11px;
    padding-left: 18px;
    text-transform: uppercase;
    font-family: ol;
}
.cip_free.col-md-4 {
    position: fixed;
    float: right;
    right: 0;
    width: 30.333333%;
}

.cip_free_title
{
    color: royalblue;
    font-weight: 600;
    font-style: initial;
    font-family: ol;
}

.flap {
  display: none;
  position: absolute;
  width: 100%;
  height: 50%;
  background-color: #fff;
  left: 0;
  top: 0;
  border-radius: 1vw 1vw 0 0;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}
.flap::before {
  content: attr(data-content);
  position: absolute;
  left: 50%;
}
.flap.front::before, .flap.under::before {
  top: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.flap.back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.flap.back::before {
  top: 100%;
  -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
          transform: translate(-50%, -50%) rotateZ(180deg);
}
.flap.over {
  z-index: 2;
}
.flap.under {
  z-index: 1;
}
.flap.front {
  -webkit-animation: flip-down-front 300ms ease-in both;
          animation: flip-down-front 300ms ease-in both;
}
.flap.back {
  -webkit-animation: flip-down-back 300ms ease-in both;
          animation: flip-down-back 300ms ease-in both;
}
.flap.under {
  -webkit-animation: fade-under 300ms ease-in both;
          animation: fade-under 300ms ease-in both;
}

@-webkit-keyframes flip-down-front {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    background-color: #fff;
    color: #333;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
    background-color: #a6a6a6;
    color: black;
  }
}

@keyframes flip-down-front {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    background-color: #fff;
    color: #333;
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
    background-color: #a6a6a6;
    color: black;
  }
}
@-webkit-keyframes flip-down-back {
  0% {
    -webkit-transform: rotateY(180deg) rotateX(0deg);
            transform: rotateY(180deg) rotateX(0deg);
    background-color: #a6a6a6;
    color: black;
  }
  100% {
    -webkit-transform: rotateY(180deg) rotateX(180deg);
            transform: rotateY(180deg) rotateX(180deg);
    background-color: #fff;
    color: #333;
  }
}
@keyframes flip-down-back {
  0% {
    -webkit-transform: rotateY(180deg) rotateX(0deg);
            transform: rotateY(180deg) rotateX(0deg);
    background-color: #a6a6a6;
    color: black;
  }
  100% {
    -webkit-transform: rotateY(180deg) rotateX(180deg);
            transform: rotateY(180deg) rotateX(180deg);
    background-color: #fff;
    color: #333;
  }
}
@-webkit-keyframes fade-under {
  0% {
    background-color: #a6a6a6;
    color: black;
  }
  100% {
    background-color: #fff;
    color: #333;
  }
}
@keyframes fade-under {
  0% {
    background-color: #a6a6a6;
    color: black;
  }
  100% {
    background-color: #fff;
    color: #333;
  }
}
.clock {
  width: 100%;
    position: relative;
    left: 0%;
  transform: translateY(-50%);
  perspective: 100vw;
  perspective-origin: 50% 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-perspective: 100vw;
          perspective: 100vw;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
}
.cip_clock {
    min-height: 114px;
    padding: 20px;
    width: 100%;
    border-radius: 26px;
    display: flow-root;
    background: #85D8CE;
    background: linear-gradient(135deg, #085078, #85D8CE);
    box-shadow: rgba(136, 136, 136, 0.57) 0.2em 0.5em 0.35em;
}
#cip_clock button.btn.peach-gradient.btn-mg {
    background: -webkit-linear-gradient(40deg,#c7da3a,#50b04f)!important;
    background: -o-linear-gradient(40deg,#c7da3a,#50b04f)!important;
    border-radius: 25px;
    background: linear-gradient(40deg,#c7da3a,#50b04f)!important;
}
#cip_clock button.btn.purple-gradient.btn-mg {
    background: -webkit-linear-gradient(40deg,#d9795d,#e41e0d)!important;
    background: -o-linear-gradient(40deg,#d9795d,#e41e0d)!important;
    border-radius: 25px;
    background: linear-gradient(40deg,#d9795d,#e41e0d)!important;
}

p.report-stat {
    font-size: 53px;
    padding: 10px;
    overflow: hidden!important;
}

button#break-in-btn {
    padding: 7px 16px;
    font-size: 16px;
}
@media(max-width:767px){
  .clock-group-btn.pull-right {
      margin-top: 40px;
  }
  #cip_clock button.btn.peach-gradient.btn-mg{
    margin:5px;
  } 
  .cip_clock {
      padding: 40px 15px;
  }
  .digit{
    margin-bottom:16px;
  }
  .clock {
      left: 9%;
  }
  button#break-in-btn {
      margin-bottom: 40px;
  }
  .cip_free.col-md-4 {
      position: relative;
      float: none;
      right: 0;
      width: 100%;
  }
}

.fade.in {
  opacity: 1!important;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-backdrop.in {
  opacity: 0.5!important;
}

nav.navbar.navbar-dark.bg-dark.main-dashboard-cip {
    margin-top: 1%;
    border-radius: 10px;
    box-shadow: 0px 0px 14px 0px rgba(0, 33, 60, 0.17);
}

.other-page-content {
    margin-top: 2%;
}

.cip-table-content {
    box-shadow: 0px 0px 14px 0px rgba(0, 33, 60, 0.17);
    border-radius: 10px;
    padding: 40px 20px;
}

.cip-table-content h1.dashboard-title {
    font-size: 25px;
    margin-bottom: 2%;
}

.row.container-fluid.information-sec {
    margin: 0px;
    padding: 0px;
    margin-bottom: 2%;
    box-shadow: 0px 0px 14px 0px rgba(0, 33, 60, 0.17);
    border-radius: 10px;
}

.information-sec h5.card-title {
    margin: 0px;
}

span.title-inner-count {
    float: right;
    color: #fff;
    background: #32373cd1;
    padding: 6px 14px;
    border-radius: 50%;
}