/* Global CSS */
:root {
   --topSectionHeight: 58px;
   --borderLineColor: #E5EAEF;
   --heightForChildElements: calc(100% - var(--topSectionHeight));
   --font-color: #2D3649;
   --font-famil-montserrat: 'Montserrat' !important;
   --active-color: #289EFD;
   --gray-color: #90A1B5;
   --white-color: #fff;
   --black-color: #000;
}

.wrapper-body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background: #f8f9fa;
   position: relative;
   overflow: hidden;
}

/* Menu Sidebar Wrapper */
.wrapper {
   width: 100%;
   height: 100%;
   position: relative;
}

/* Start top header css */
.topbar-nav .navbar {
   padding: 0px 1rem;
   z-index: 999;
   height: var(--topSectionHeight);
   background: #FFFEFE;
   border-bottom: 1px solid var(--borderLineColor);
}

.topbar-nav .navbar-brand {
   margin-right: -5px;
   display: flex;
   align-items: center;
   font-size: 1.1rem;
   font-weight: bold;
   letter-spacing: 0.02em;
   color: #1a88da;
}

.topbar-nav .navbar-brand img {
   width: 40px;
   margin-right: 1px;
}

.topbar-nav .navbar-expand-lg .navbar-nav .nav-link {
   color: var(--font-color);
   font-size: 14px;
   font-weight: 600;
   padding: 0.5rem 1.2rem;
   cursor: pointer;
}

.topbar-nav .navbar-expand-lg .navbar-nav .nav-link:hover,
.topbar-nav .navbar-expand-lg .navbar-nav .nav-link.active {
   color: var(--active-color);
}

.user-profile-dropdown {
   display: flex;
   align-items: center;
}

.user-profile {
   padding: 0 8px;
}

.topbar-nav .dropdown-toggle::after {
   border: none;
   background-image: url('../images/dropdown-arrow.svg');
   background-size: 10px;
   background-repeat: no-repeat;
   width: 10px;
   height: 7px;
   margin-left: -0.1rem;
   vertical-align: -0.055em;
}

.topbar-nav .dropdown.show .dropdown-toggle::after {
   transform: rotate(180deg);
}

.topbar-nav .dropdown .dropdown-menu {
   border-radius: 0 0 10px 10px;
   box-shadow: 0 7px 10px #dadadaad;
   outline: 1px solid #ebebeb;
   border: none;
   padding: 0 0 1rem;
}

.nav-link .user-profile .img-circle {
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

/* End top header css */

/* Start Login css */
.card-login {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: border-box;
   box-shadow: 0 13px 27px -5px rgb(50 50 93 / 25%), 0 8px 16px -8px rgb(0 0 0 / 30%), 0 -6px 16px -6px rgb(0 0 0 / 3%);
   border-radius: 1rem;
   padding: 3vw;
   margin: 2vw 0;
}

.card-login .wing-logo img {
   width: 50px;
}

.card-login .title {
   font-size: 2rem;
   font-weight: 500;
   line-height: normal;
   margin-bottom: 2rem;
}

.card-login .title small {
   display: block;
   font-weight: bold;
   color: #1b55e2;
}

.card-login .title small.reset-title {
   font-size: 1rem;
   font-weight: normal;
   color: #3b3f5c;
   padding-top: 0.5rem;
}
.form-group{
   position: relative;
}
.form-group label {
   font-size: .75rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   color: #344767;
   margin-left: 0.25rem;
}

.form-control {
   display: block;
   width: 100%;
   padding: 0.5rem 0.75rem;
   height: calc(2.5em + 0.75rem + 2px);
   font-size: .875rem;
   font-weight: 400;
   line-height: 1.4rem;
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #d2d6da;
   /* appearance: none; */
   border-radius: 0.5rem;
   transition: box-shadow .15s ease, border-color .15s ease;
}

.link {
   font-weight: 700;
   color: #1b55e2;
   letter-spacing: 2px;
   font-size: 15px;
   margin-top: 15px;
   transition: all .15s ease-in;
}

.link:hover {
   color: #2169ff;
}

.btn-wing {
   font-weight: 500;
   width: 100%;
   letter-spacing: -.025rem;
   box-shadow: 0 4px 7px -1px rgb(0 0 0 / 11%), 0 2px 4px -1px rgb(0 0 0 / 7%);
   background-image: linear-gradient(310deg, #2152ff, #21d4fd);
   border: none;
   padding: 0.8375rem 0.75rem;
   font-size: 1rem;
   transition: all .15s ease-in;
   border-radius: 1rem;
}

.btn-wing:hover {
   transform: scale(1.05);
   background-image: linear-gradient(310deg, #2152ff, #2152ff);
}

#footer-login {
   position: absolute;
   left: 1rem;
   bottom: 1rem;
   font-size: 13px;
   width: 100%;
   text-align: center;
   opacity: 0.5;
}

#footer-login a {
   color: #009dff;
}

/* End Login css */

/* Home page css */
#content {
   position: fixed;
   top: var(--topSectionHeight);
   left: 0;
   width: 100%;
   height: var(--heightForChildElements);
   max-height: calc(100% - 100px);
   overflow: auto;
}

.main-section {
   padding: 2vh 0;
}

.wing-table {
   position: relative;
   background-color: #fff;
   background-clip: border-box;
   border: 0 solid rgba(0, 0, 0, .125);
   border-radius: 1rem;
   box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
   padding: 1rem;
   width: 100%;
}

.table-title {
   font-size: 2rem;
   font-weight: 500;
}

.wing-table .form-control {
   height: calc(1.5em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
}

.anchor-text {
   cursor: pointer;
}

.announcement-image img {
   object-fit: fill;
   height: 50px;
   width: 70px;
}

.dataTables_scroll {
   margin-bottom: 1rem;
}

.title-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px dashed #dee2e6;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
}

.announcement-card {
   position: relative;
   background-color: #fff;
   background-clip: border-box;
   border: 0 solid rgba(0, 0, 0, .125);
   border-radius: 1rem;
   box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
   width: 100%;
}

.announcement-card-preq{
   position: relative;
   background-color: #fff;
   background-clip: border-box;
   border: 0 solid rgba(0, 0, 0, .125);
   border-radius: 1rem;
   box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

.announcement-form-section {
   padding: 2vw 5vw;
   height: 100%;
   overflow: auto;
}

.announcement-form .form-group label span {
   color: #ff5722;
}

.announcement-form-section h3 {
   font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 2rem;
}

.preview-section {
   height: 100%;
   background: #F3F3F3;
   padding: 2vw 5vw;
   overflow: auto;
}

.custom-file {
   height: calc(2.5em + 0.75rem + 2px);
}

.custom-file-input,
.custom-file-label,
.custom-file-label::after {
   height: calc(2.5em + 0.75rem + 2px);
   padding: 0.75rem 0.75rem;
}

.button-group-pills .btn {
   border-radius: 20px;
   line-height: 1.2;
   margin-bottom: 5px;
   margin-left: 2px;
   border-color: #bbb;
   background-color: #fff;
   color: #14a4be;
}

.button-group-pills .btn.active {
   border-color: #14a4be;
   background-color: #14a4be;
   color: #fff;
   box-shadow: none;
}

.button-group-pills .btn:hover {
   border-color: #158b9f;
   background-color: #158b9f;
   color: #fff;
}

.button-group-pills label input {
   position: absolute;
   display: none;
   color: #fff;
}

.button-group-pills .btn div {
   font-family: Roboto, sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 8px;
   line-height: 8px;
   display: flex;
   align-items: center;
   color: #bbb;
}

.button-group-pills .btn.active div {
   color: #fff;
}

.preview-section .preview-title {
   font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
}

.button-group-pills {
   margin-bottom: 1rem;
}

.preview-card {
   background: #FFFFFF;
   border: 1px solid #FFFFFF;
   box-sizing: border-box;
   box-shadow: 0px 28px 30px rgb(143 150 166 / 20%);
   border-radius: 15px;
}

.preview-card .modal-body .ann-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   margin-bottom: 12px;
}

.preview-card .modal-body .ann-header .left-title {
   font-family: 'Poppins', sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
   line-height: 15px;
   letter-spacing: 0.02em;
   color: #979797;
   flex: 1;
   display: flex;
   align-items: center;
}

.preview-card .modal-body .ann-header .left-title span {
   font-weight: 600;
   color: #fff;
   width: 48px;
   height: 22px;
   background: #289EFD;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 6px;
}

.preview-card .middle-body .body-title {
   font-family: 'Poppins', sans-serif;
   font-style: normal;
   font-weight: bold;
   font-size: 21px;
   line-height: 27px;
   letter-spacing: 0.02em;
   color: #333333;
   margin-bottom: 8px;
}

.middle-body .ann-image-box {
   position: relative;
   width: 100%;
   filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.09));
   border-radius: 15px;
   min-height: 200px;
   margin-bottom: 8px;
   overflow: hidden;
}

.middle-body .ann-image-box .play-btn {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.middle-body .ann-image-box .play-btn img {
   width: 62px;
}

.middle-body .ann-image-box img.ann-image {
   width: 100%;
   object-fit: fill;
   border-radius: 15px;
}

.middle-body .ann-details {
   font-family: 'Poppins', sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size: 15px;
   line-height: 24px;
   letter-spacing: 0.02em;
   color: #848484;
}

.ann-footer {
   margin-top: 1rem;
}

.ann-footer .btn-primary {
   background: #289EFD;
   border-radius: 100px;
   font-style: normal;
   font-weight: bold;
}

.mistake-report-btn {
   cursor: pointer;
}

.button-group .btn {
   margin: 0 0.3rem;
}

.eye-slash::before {
   content: '';
   width: 20px;
   height: 2px;
   background: #aaaaaa;
   display: block;
   transform: rotate(145deg);
   position: absolute;
   top: 6px;
}

.pwd-btn {
   position: absolute;
   bottom: 13px;
   right: 10px;
   cursor: pointer;
}

.container-title{
   font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
}

.customer-actions-text{
   text-transform: uppercase;
}
.announcement-img-section img{
   max-height: 375px;
   width: 90%;
}
.updateModals-ca .modal-title{
   font-size: 16px;
   font-weight: 600;
   line-height: 28px;
   letter-spacing: 0.28px;
}
.updateModals-ca .modal-body{
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.28px;
}
.customer-actions-dropdown.dropdown .dropdown-menu{
   padding: .5rem 0 ;
}
.customer-actions-dropdown.dropdown .dropdown-menu .dropdown-item{
   color: var(--font-color);
   font-size: 14px;
   font-weight: 600;
   padding:  10px;
}
.customer-actions-dropdown.dropdown .dropdown-toggle::after{
   margin-left: 5px;
}
.customer-actions-dropdown.dropdown.show .dropdown-toggle::after{
   margin-bottom: 3px;
}

.navbar-nav.ml-auto.navbar-nav{
   background: #fff;
}

#loading{
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
  opacity: 0.7;
  background-color: #fff;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#loading-image {
  position: relative;
  margin: auto;
  height: 60px;
  width: 60px;
  z-index: 999999;
}

@media(max-width:850px){
   .prr-container{
      flex-direction: column;
   }
   .prr-container .col:first-child{
      margin-bottom: 20px;
   }
   .announcement-img-section img{
      max-height: max-content;
      width: 100%;
   }
   .announcement-card-preq{
      margin-top: 20px;
   }
}