html,body {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
  /*
  overflow: hidden;
  */
}
hr {
  border: none;
  background: linear-gradient(135deg, #EA5C54 0%, #bb6dec 100%);
  height: 1px;
  margin: 10px;
}
h1 {
  font-size: 24px;
  font-weight: normal;
  margin: 0px;
  overflow: visible;
  padding: 0px;
  text-align: center;
}
.dd_fixed_center_screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dd_unvis {
  opacity: 0 !important;
}
.dd_hide {
  display: none !important;
}
.dd_fa_btn {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  border: 1px solid #bbb;
  background: #00000011;
  border-radius: 50%;
  text-align: center;
  margin: 10px;
}
.dd_tight {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  border:none;
}
.dd_animate {
  transition: all 0.3s;
}
/* bootstrap override */
.panel {
  border: 1px solid rgb(107, 107, 107);
  background-color: rgba(0, 0, 0, 0.75);
  color: ivory;
}
.panel-default > .panel-heading {
  border-bottom: 1px solid rgb(107, 107, 107);
  background-color: rgba(0, 0, 0, 0.75);
  color: ivory;
}
.dd_flip {
    transform: scaleX(-1);
}
.dd_fixed_center_screen_video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dd_fixed_center_screen_video_flip {
    transform: translate(-50%, -50%) scaleX(-1);
}
.dd_rotate_90_full {
	transform: rotate(90deg);
	transform-origin: top left;
	left: 100%;
	position: absolute;
	height: 100vw;
	width: 100vh;
}

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* -------- ziswafq */
.dd_padding_left_right_zero {
	padding-left:0;
	padding-right:0;
}
.dd_fixed_center_top {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translate(-50%, -50%);
}




/* upload */
.uploads .block {
	position: relative;
	display: inline-block;
	vertical-align: top;
	max-width: 350px;
	/*
	max-height: 300px;
	*/
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: white;
	border: 1px solid #CCCCCC;
}

.uploads .block .progressBar {
	background-color: #3E6FAD;
	width: 0px;
	height: 5px;
	/*
	margin-top: 47px;
	*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-moz-transition: .25s ease-out;
	-webkit-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	transition: .25s ease-out;
}

.uploads .block .deleteButton {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	/*
	background-color: red;
	*/
	border: 2px solid white;
	color: white;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow: 0px 0px 10px 0px #C4C4C4;
	-webkit-box-shadow: 0px 0px 10px 0px #C4C4C4;
	-o-box-shadow: 0px 0px 10px 0px #C4C4C4;
	box-shadow: 0px 0px 10px 0px #C4C4C4;
	cursor: pointer;
}
.uploads .block .cancelButton {
	position: absolute;
	top: -10px;
	right: -10px;
	width: 25px;
	height: 25px;
	background-color: black;
	border: 2px solid white;
	color: white;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	-o-border-radius: 25px;
	border-radius: 25px;
	-moz-box-shadow: 0px 0px 10px 0px #C4C4C4;
	-webkit-box-shadow: 0px 0px 10px 0px #C4C4C4;
	-o-box-shadow: 0px 0px 10px 0px #C4C4C4;
	box-shadow: 0px 0px 10px 0px #C4C4C4;
	cursor: pointer;
}

.uploads .block .format {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-top: 34px;
}

.uploads .block .error {
	text-align: left;
	font-size: 14px;
	color: red;
}

.uploads .block .cancel {
	text-align: left;
	font-size: 14px;
	color: orange;
	position: absolute;
	bottom: 0;
	right: 0;
}


/* hide scrollbar */
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

/* tabulator override */



.dd_full_modal-dialog {
  height: 100vh;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  /*
  height: 92% !important;
  min-height: 92% !important;
  max-height: 92% !important;
  */
  padding: 0 !important;
  margin: 0 !important;
}

.dd_full_modal-content {
  /*
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
  padding-bottom: 10px !important;
  */
  padding: 0 !important;
  margin: 0 !important;
}
.dd_full_modal-body {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}





/* WAITING OVERLAY AJAX SPINNER */
#overlay{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height:100%;
  display: none;
  background: rgba(0,0,0,0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}
.is-hide{
  display:none;
}



.modal-fullscreen {
  width:100vw;
  /*
  height:100vh;
  */
  margin:0;
  padding:0;
  max-width:none;
}

.dd-bg-primary {
	background-color: #007bff30!important;
}
.dd-bg-secondary {
	background-color: #6c757d30!important;
}
.dd-bg-success {
	background-color: #28a74530!important;
}
.dd-bg-danger {
	background-color: #dc354530!important;
}
.dd-bg-warning {
	background-color: #ffc10730!important;
}
.dd-bg-info {
	background-color: #17a2b830!important;
}
.dd-bg-dark {
	background-color: #343a4030!important;
}
.dd-bg-clean {
	background-color: none;
}


.number-circle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    color: #666;
    text-align: center;
    /*
    border: 2px solid #666;
    font: 32px Arial, sans-serif;
    */
}

.qurban_pic {
    border: 1px solid;
    padding: 2px;
    margin: 2px;
    min-width: 250px;
}