body{
  height: calc(100% - 100px);
}
.home-logo{
    max-width: 100%;
}

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}
/* ---------------toggle switch start------------------- */
.toggle-control {
  display: block;
  position: relative;
  padding-left: 50px;
  margin-bottom: 25px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.toggle-control input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.toggle-control input:checked ~ .control {
  background-color: dodgerblue;
}
.toggle-control input:checked ~ .control:after {
  left: 30px;
}
.toggle-control .control {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 50px;
  border-radius: 12.5px;
  background-color: darkgray;
  transition: background-color 0.15s ease-in;
}
.toggle-control .control:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 12.5px;
  background: white;
  transition: left 0.15s ease-in;
}

/* ---------------toggle switch end------------------- */
/* ---------------Compulsory star START------------------- */
.compulsory-star {
  color:red;
}
/* ---------------Compulsory star END------------------- */
/* ---------------Chart Loader START------------------- */
.chart_loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #555; /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;

  position: absolute; /* Sit on top of the page content */
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translate(-50%, -50%);

  display: none; /* Hidden by default */
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ---------------Chart Loader END------------------- */


/* 

for zoom animation 
uncomment this part if you haven't added this code anywhere else

*/
/*

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}
*/
.file-upload {
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px dotted #1e88e5;
  overflow: hidden;
  transition: all 1s;
  color: #fff;
  font-size: 60px;
}
.file-upload input[type='file'] {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.img-banner{
  position: relative;
  height: 200px;

}

.remove-link{
  color: #72afd2;
  text-decoration: underline;
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

/* width */
::-webkit-scrollbar {
  width: 1px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #FED87F; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FED87F; 
}

.img-container{
  max-width: 50vw; /*your responsive value here*/
  max-height: 50vh; /*your responsive value here*/
}
#cropperImage{
  max-width: 100%; /* prevent the overflow blip when the modal loads */
}