/* STYLE CRETATED BY GG */
 /*VARIABLES BY GEDEON*/
:root{
  --primaryColor: #00568f; /*#77b1d6;*/
  --primaryDarkColor: #00568f; 
  --secondaryColor: #212121;
  --gray: #9e9e9e;
}
 .allBtn,
 .allBtn:focus {

   background-color: blueviolet;
   z-index: 1;
   /* border-radius: 10px; */
   color: white;
 }

 .allBtn:hover {

   background-color: blueviolet;
   z-index: 1;
   /* border-radius: 10px; */
   color: blanchedalmond;
 }

 /* Payments */
 .requirement-card {
   background: #ffffff;
   padding: 20px;
   margin-bottom: 25px;
   border: 1px solid #e7eaec;
   border-radius: 15px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
   box-shadow: 0 10px 6px -6px #777;
   height: 300px;
   overflow: hidden;
 }

 /* INSIDE-SIDE-BAR STYLE gg*/

 /* .inside-sidebar-nav {

   -moz-box-shadow: 3px 3px 5px 6px #ccc;
   -webkit-box-shadow: 3px 3px 5px 6px #ccc;
   box-shadow: 0px 0px 5px 3px #ccc;
   background-image: url('../img/logoLogin/bg-02.jpg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
 } */

 /* .inside-sidebar-nav {
   position: relative;
   background: #5C97FF;
   overflow: hidden;
 } */

 .inside-sidebar-nav:before {
   content: ' ';
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   opacity: 0.4;
   background-image: url('../img/logoLogin/bg-02.jpg');
   background-repeat: no-repeat;
   background-position: 50% 0;
   -ms-background-size: cover;
   -o-background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   background-size: cover;
   -moz-box-shadow: 0px 0px 5px 0px #ccc;
   -webkit-box-shadow: 0px 0px 5px 0px #ccc;
   box-shadow: 0px 0px 5px 0px #ccc;
 }

 .addMargin {
   z-index: 2;
   color: #ffffff;
 }

 .nav-header {
   z-index: 2;
   -moz-box-shadow: 0px 0px 5px 0px #ccc;
   -webkit-box-shadow: 0px 0px 5px 0px #ccc;
   box-shadow: 0px 0px 5px 0px #ccc;
 }

 .li-start {
   z-index: 2;
   color: #fff;
 }

 .sub-level-menu li a {
   color: #000000;
 }

 /* AUTOMATIC SLIDE */
 /* CSS reset */

 a {
   color: #333;
   text-decoration: none;
 }

 .container {
   position: relative;
   text-align: center;
 }

 .clr {
   clear: both;
 }

 .container>header {
   padding: 30px 30px 10px 20px;
   margin: 0px 20px 10px 20px;
   position: relative;
   display: block;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   text-align: right;
 }

 .container>header .authBtn {
   padding: 30px 30px 10px 20px;
   margin: 0px 20px 10px 20px;
   position: relative;
   display: block;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   text-align: right;
 }

 .container>header h1 {
   font-family: "helvetica neue", helvetica;
   font-size: 35px;
   line-height: 35px;
   position: relative;
   font-weight: 400;
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
   padding: 0px 0px 5px 0px;
 }

 .container>header h1 span {}

 .container>header h2,
 p.info {
   font-size: 16px;
   font-style: italic;
   color: #f8f8f8;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
 }

 .slideshow,
 .slideshow:after {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   z-index: 0;
   list-style-type: none;
 }

 .slideshow:after {
   content: "";
   /* background: transparent url(../images/pattern.png) repeat top left; */
 }

 .slideshow li span {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   color: transparent;
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: none;
   opacity: 0;
   z-index: 0;
   -webkit-backface-visibility: hidden;
   -webkit-animation: imageAnimation 36s linear infinite 0s;
   -moz-animation: imageAnimation 36s linear infinite 0s;
   -o-animation: imageAnimation 36s linear infinite 0s;
   -ms-animation: imageAnimation 36s linear infinite 0s;
   animation: imageAnimation 36s linear infinite 0s;
   text-decoration: none;
 }

 .slideshow li div {
   z-index: 1000;
   position: absolute;
   bottom: 30px;
   left: 0px;
   width: 100%;
   text-align: center;
   opacity: 0;
   -webkit-animation: titleAnimation 36s linear infinite 0s;
   -moz-animation: titleAnimation 36s linear infinite 0s;
   -o-animation: titleAnimation 36s linear infinite 0s;
   -ms-animation: titleAnimation 36s linear infinite 0s;
   animation: titleAnimation 36s linear infinite 0s;
 }

 .slideshow li div h3 {
   font-family: "helvetica neue", helvetica;
   text-transform: uppercase;
   font-size: 80px;
   padding: 0;
   line-height: 200px;
   /* color: rgba(255, 255, 255, 0.8); */
   color: #BF9553
 }

 .slideshow li:nth-child(1) span {
   background-image: url(../img/logoLogin/bg-02.jpg);
 }

 .slideshow li:nth-child(2) span {
   background-image: url(../img/logoLogin/bg-03.jpg);
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
 }

 .slideshow li:nth-child(3) span {
   background-image: url(../img/logoLogin/bg-04.jpg);
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;
 }

 .slideshow li:nth-child(4) span {
   background-image: url(../img/logoLogin/bg-02.jpg);
   -webkit-animation-delay: 18s;
   -moz-animation-delay: 18s;
   -o-animation-delay: 18s;
   -ms-animation-delay: 18s;
   animation-delay: 18s;
 }

 .slideshow li:nth-child(5) span {
   background-image: url(../img/logoLogin/bg-02.jpg);
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   -ms-animation-delay: 24s;
   animation-delay: 24s;
 }

 .slideshow li:nth-child(6) span {
   background-image: url(../img/logoLogin/bg-02.jpg);
   -webkit-animation-delay: 30s;
   -moz-animation-delay: 30s;
   -o-animation-delay: 30s;
   -ms-animation-delay: 30s;
   animation-delay: 30s;
 }

 .slideshow li:nth-child(2) div {
   -webkit-animation-delay: 6s;
   -moz-animation-delay: 6s;
   -o-animation-delay: 6s;
   -ms-animation-delay: 6s;
   animation-delay: 6s;
 }

 .slideshow li:nth-child(3) div {
   -webkit-animation-delay: 12s;
   -moz-animation-delay: 12s;
   -o-animation-delay: 12s;
   -ms-animation-delay: 12s;
   animation-delay: 12s;
 }

 .slideshow li:nth-child(4) div {
   -webkit-animation-delay: 18s;
   -moz-animation-delay: 18s;
   -o-animation-delay: 18s;
   -ms-animation-delay: 18s;
   animation-delay: 18s;
 }

 .slideshow li:nth-child(5) div {
   -webkit-animation-delay: 24s;
   -moz-animation-delay: 24s;
   -o-animation-delay: 24s;
   -ms-animation-delay: 24s;
   animation-delay: 24s;
 }

 .slideshow li:nth-child(6) div {
   -webkit-animation-delay: 30s;
   -moz-animation-delay: 30s;
   -o-animation-delay: 30s;
   -ms-animation-delay: 30s;
   animation-delay: 30s;
 }

 /* Animation for the slideshow images */
 @-webkit-keyframes imageAnimation {
   0% {
     opacity: 0;
     -webkit-animation-timing-function: ease-in;
   }

   8% {
     opacity: 1;
     -webkit-transform: scale(1.05);
     -webkit-animation-timing-function: ease-out;
   }

   17% {
     opacity: 1;
     -webkit-transform: scale(1.1);
   }

   25% {
     opacity: 0;
     -webkit-transform: scale(1.1);
   }

   100% {
     opacity: 0;
   }
 }

 @-moz-keyframes imageAnimation {
   0% {
     opacity: 0;
     -moz-animation-timing-function: ease-in;
   }

   8% {
     opacity: 1;
     -moz-transform: scale(1.05);
     -moz-animation-timing-function: ease-out;
   }

   17% {
     opacity: 1;
     -moz-transform: scale(1.1);
   }

   25% {
     opacity: 0;
     -moz-transform: scale(1.1);
   }

   100% {
     opacity: 0;
   }
 }

 @-o-keyframes imageAnimation {
   0% {
     opacity: 0;
     -o-animation-timing-function: ease-in;
   }

   8% {
     opacity: 1;
     -o-transform: scale(1.05);
     -o-animation-timing-function: ease-out;
   }

   17% {
     opacity: 1;
     -o-transform: scale(1.1);
   }

   25% {
     opacity: 0;
     -o-transform: scale(1.1);
   }

   100% {
     opacity: 0;
   }
 }

 @-ms-keyframes imageAnimation {
   0% {
     opacity: 0;
     -ms-animation-timing-function: ease-in;
   }

   8% {
     opacity: 1;
     -ms-transform: scale(1.05);
     -ms-animation-timing-function: ease-out;
   }

   17% {
     opacity: 1;
     -ms-transform: scale(1.1);
   }

   25% {
     opacity: 0;
     -ms-transform: scale(1.1);
   }

   100% {
     opacity: 0;
   }
 }

 @keyframes imageAnimation {
   0% {
     opacity: 0;
     animation-timing-function: ease-in;
   }

   8% {
     opacity: 1;
     transform: scale(1.05);
     animation-timing-function: ease-out;
   }

   17% {
     opacity: 1;
     transform: scale(1.1);
   }

   25% {
     opacity: 0;
     transform: scale(1.1);
   }

   100% {
     opacity: 0;
   }
 }

 /* Animation for the title */
 @-webkit-keyframes titleAnimation {
   0% {
     opacity: 0;
     -webkit-transform: translateY(200px);
   }

   8% {
     opacity: 1;
     -webkit-transform: translateY(0px);
   }

   17% {
     opacity: 1;
     -webkit-transform: scale(1);
   }

   19% {
     opacity: 0;
   }

   25% {
     opacity: 0;
     -webkit-transform: scale(10);
   }

   100% {
     opacity: 0;
   }
 }

 @-moz-keyframes titleAnimation {
   0% {
     opacity: 0;
     -moz-transform: translateY(200px);
   }

   8% {
     opacity: 1;
     -moz-transform: translateY(0px);
   }

   17% {
     opacity: 1;
     -moz-transform: scale(1);
   }

   19% {
     opacity: 0;
   }

   25% {
     opacity: 0;
     -moz-transform: scale(10);
   }

   100% {
     opacity: 0;
   }
 }

 @-o-keyframes titleAnimation {
   0% {
     opacity: 0;
     -o-transform: translateY(200px);
   }

   8% {
     opacity: 1;
     -o-transform: translateY(0px);
   }

   17% {
     opacity: 1;
     -o-transform: scale(1);
   }

   19% {
     opacity: 0;
   }

   25% {
     opacity: 0;
     -o-transform: scale(10);
   }

   100% {
     opacity: 0;
   }
 }

 @-ms-keyframes titleAnimation {
   0% {
     opacity: 0;
     -ms-transform: translateY(200px);
   }

   8% {
     opacity: 1;
     -ms-transform: translateY(0px);
   }

   17% {
     opacity: 1;
     -ms-transform: scale(1);
   }

   19% {
     opacity: 0;
   }

   25% {
     opacity: 0;
     -webkit-transform: scale(10);
   }

   100% {
     opacity: 0;
   }
 }

 @keyframes titleAnimation {
   0% {
     opacity: 0;
     transform: translateY(200px);
   }

   8% {
     opacity: 1;
     transform: translateY(0px);
   }

   17% {
     opacity: 1;
     transform: scale(1);
   }

   19% {
     opacity: 0;
   }

   25% {
     opacity: 0;
     transform: scale(10);
   }

   100% {
     opacity: 0;
   }
 }

 /* Show at least something when animations not supported */
 .no-cssanimations .slideshow li span {
   opacity: 1;
 }

 @media screen and (max-width: 1140px) {
   .slideshow li div h3 {
     font-size: 100px;
   }
 }

 @media screen and (max-width: 600px) {
   .slideshow li div h3 {
     font-size: 50px;
   }
 }

 @media screen and (max-width:425px) {
   /* header {
    background-image: url(../img);
   } */

   header a {
     margin: 50px;
     position: relative;
     top: 50%;
     left: 30%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     float: left;
   }

   .authBtn {
     /* margin: 50%; */
     z-index: 3;
     height: 300px;
   }

   .authBtn::before {
     /* margin: 50%; */
     /* background-color: lawngreen; */
     z-index: 3;
     height: 300px;
   }

   .wrap-form {
     margin: 0;
     position: relative;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -100%);
   }
 }


 /* end AUTOMATIC slide animation*/
 .modalPop-card {
   background: rgb(93, 42, 110);
   /* background: -webkit-linear-gradient(to right, #2E1437, #948E99);
   background: linear-gradient(to right, rgb(93, 42, 110), #948E99); */
   padding: 20px;
   margin-bottom: 25px;
   border: 1px solid #e7eaec;
   border-radius: 15px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
   box-shadow: 0 10px 6px -6px #777;
 }

 .login-card {
 
  background: linear-gradient(to bottom, #ffffff, rgb(170, 167, 167));
  /* background: linear-gradient(to bottom, #fff, #fff); */

  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #e7eaec;
  border-radius: 15px;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

 /* 2021 style**/

 .form-control-in{
  width: 100%;
  height: 20px;
  background-color: rgb(93, 42, 110);
 }
 .popUpSstyle{
  border-radius: 10px;
}
.btn-grad {background-image: linear-gradient(to right, rgb(93, 42, 110) 0%, rgb(93, 42, 110)  51%, rgb(93, 42, 110)  100%)}
.btn-grad {
  /* margin: 10px; */
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #FFFFFF;
  border-radius: 10px;
  /* display: block; */
 }

 .btn-grad:hover {
  background-position: right center; 
  color: #FFFFFF;
  text-decoration: none;

 }

 .btn-grad3 {background-image: linear-gradient(to right, #c62828 0%, #c62828  51%, #c62828  100%)}
 .btn-grad3 {
  /* margin: 10px; */
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #FFFFFF; 
  /* border: 1px solid #0000; */
  border-radius: 10px;
  /* display: block; */
  }

  .btn-grad3:hover {
    background-position: right center; 
    color: #FFFFFF;
    text-decoration: none;

  }
 /** end 2021 style */

 .profileView-card {
   background: #ffffff;
   padding: 20px;
   margin-bottom: 25px;
   border: 1px solid #e7eaec;
   /* border-radius: 15px; */
   -webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
   box-shadow: 0 10px 6px -6px #777;
 }
 .menuFunctionView-cardOriginal{
  /* background: #ffffff; */
  padding: 20px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 25px;
  border: 1px solid #e7eaec;
  /* border-radius: 15px; */
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}
 .menuFunctionView-card {
   width: 400px;
   background: #ffffff;
   padding: 20px;
   margin-right: 10px;
   margin-left: 10px;
   margin-bottom: 25px;
   border: 1px solid #e7eaec;
   /* border-radius: 15px; */
   -webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
   box-shadow: 0 10px 6px -6px #777;
 }
 .menuFunctionView-card2 {
  width: 500px;
  background: #ffffff;
  padding: 20px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 25px;
  border: 1px solid #e7eaec;
  /* border-radius: 15px; */
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

 /* PAYMENT STYLE GG */
 .payment-method img {
   /* display: inline;
 width: 150px; */
   float: left;
   margin: 15px 15px 15px 15px;
   width: 100px;
 }

 .payment-method img {
   float: left;
   margin: 15px 15px 15px 15px;
   width: 100px;
 }

 .loginscreen.middle-box {
   width: 400px;
   margin-top: 70px;
 }

 .goldGradientBtn,
 .goldGradientBtn:focus {
   color: #fff;
   background: #d50000;
   /* background: rgb(189, 141, 65); */
   /* background: linear-gradient(to right, #734b6d, #B97F24); */
   box-shadow: 0 10px 6px -6px #fff;
 }

 .goldGradientBtn:hover {
   /* color: #734b6d; */
   color: #795548;
   background: #fff;
   box-shadow: 0 10px 6px -6px rgb(134, 101, 49);
   /* border: 1px solid rgb(93, 42, 110); */
 }

 .textWhite {
   color: #ffffff;
 }

 /** POWER BI IFRAME*/
 .containerPI {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframePI {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
 /**End iframe*/

 /*ROUND CARD DESIGN*/
 .roundCard{
  border-radius: 15px;
  /* box-shadow: 0 7px 6px -1px #777; */
  box-shadow: 0 6px 6px -3px gray;
 }
 /* custome dashboard style*/

 .dashCard{
  border-radius: 15px;
  /* box-shadow: 0 7px 6px -1px #777; */
  box-shadow: 0 6px 6px -3px gray;
 }

 .dashCard h3,
 .dashCard h5{
  color: var(--gray);
 }


.dashCard:hover, h3.class > *{
     background-color: #463c3c;
     color: #fff !important;
   -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.1);
  cursor: pointer;
}

.contentCard{
  border-radius: 8px;
  box-shadow: 0 6px 6px -3px gray;
}
.dashTableCard{
  border-radius: 10px;
  box-shadow: 0 7px 6px -1px #777;
 }

 .centeredContent{
  margin: 0 auto;
  max-width: 900px;
  height: 100px;
  z-index:1;
 }

 .disabledDashCard{
  opacity: 0.5;
  pointer-events: none;
}

h2.al-title{
  font-weight: 700;
  color: #666666;
  text-transform: uppercase;
  font-size: 20px;
  /* opacity: 0.9; */
}

label.al-heading{
  /* text-transform: uppercase; */
  margin-top: 2%;
  color: #000;
}

label.al-subtitle{
  font-weight: 600;
  color: #263238;
  font-size: 12px;
}


/** SELECT RADIO BUTTON ON ALL LISTING PAGE*/
.myradio-button,
.mycheckbox {
  position: relative;
  margin: 0px 0px;
}
.mycheckbox { display: block; }

.myradio-button input,
.mycheckbox input {
  position: absolute;
  margin: 5px;
  padding: 0;
  /* for mobile accessibility (iOS Label Bug) */
  visibility: hidden;
}
.myradio-button .label-visible,
.mycheckbox .label-visible {
  margin-left: 2em;
  margin-bottom: 0;
}


.myfake-radiobutton,
.myfake-checkbox{
  position: absolute;
  display: block;
  top: 0;
  left: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid slategray;
  background-color: white;
}
.myfake-radiobutton:after,
.myfake-checkbox:after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--primaryColor);
  transform: translateX(-50%) translateY(-50%);
}

.myfake-radiobutton { border-radius: 50%; }
.myfake-radiobutton:after { border-radius: 50%; }


input[type="radio"]:checked + span .myfake-radiobutton:after,
input[type="checkbox"]:checked + span .myfake-checkbox:after { display: block; }
input:required { background-color: #FEF2F2; }
select:required { background-color: #FEF2F2; }
.userPassword {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}


/* EYE ICON LOGIC */
.p-change-viewer{
  float: right;
  margin-top: -40px;
  position: relative;
  right: 20px;
  z-index: 1;
  cursor: pointer;
}

.p-viewer{
  float: right;
  margin-top: -25px;
  position: relative;
  right: 20px;
  z-index: 1;
  cursor: pointer;
}

.fa-eye{
  color: #000;
}

/* INVOICE STYLE */
#totalInvoice{
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 15px;
}

#totalInvoice sup{
  font-size: 12px;
  top: -18px;
  font-weight: bold;
}

#totalInvoice label{
  font-size: 12px;
}

/* BACKGROUND LOGIN IMAGE */
.auth-bg{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.dashIcon{
  font-size: 30px;
}