:root{
    --color-primary: 30 64 175;
    --color-secondary: 226 232 240;
    --color-success: 132 204 22;
    --color-info: 6 182 212;
    --color-warning: 250 204 21;
    --color-pending: 249 115 22;
    --color-danger: 220 38 38;
    --color-light: 241 245 249;
    --color-dark: 30 41 59;
    --color-slate-50: 248 250 252;
    --color-slate-100: 241 245 249;
    --color-slate-200: 226 232 240;
    --color-slate-300: 203 213 225;
    --color-slate-400: 148 163 184;
    --color-slate-500: 100 116 139;
    --color-slate-600: 71 85 105;
    --color-slate-700: 51 65 85;
    --color-slate-800: 30 41 59;
    --color-slate-900: 15 23 42;
}
.form-group {
    margin-bottom: 0.3rem;
}
p.value{
    padding-top: calc(.5rem + 1px);
    padding-bottom: calc(.5rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    font-weight: bold;
}
.custom-radio-danger::before{
    border-color:var(--danger);
}
.custom-radio-success::before{
    border-color:var(--success);
}

.custom-control-input:checked ~ .custom-radio-danger::before{
    border-color:var(--danger);
    background-color:var(--danger);
}
.custom-control-input:checked ~ .custom-radio-success::before{
    border-color:var(--success);
    background-color:var(--success);
}
.required{
    color: var(--danger);
}
label.error{
    color: var(--danger);
}
.el-hide{
    display: none;
}
.select2-dropdown{
    z-index: 99999;
}

.datepicker > div {
    display: block;
}
.datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active, .open > .dropdown-toggle.datepicker table tr td span.active, .open > .dropdown-toggle.datepicker table tr td span.active:hover, .open > .dropdown-toggle.datepicker table tr td span.active.disabled, .open > .dropdown-toggle.datepicker table tr td span.active.disabled:hover{
    background-color: #5369f8;
}

.fl-list {
    width: auto;
    display: inline-block;
    text-align: center;
}

.fl-list ul {
    margin: 0;
    padding: 0 0;
    list-style: none;
}

.btn-yellow-primary{
    background-color: var(--primary-yellow);
    color: #00000090;
}
.btn-yellow-primary:hover{
    background-color: var(--primary-yellow-dark);
    color: #00000090;
}
.btn-blue-primary{
    background-color: var(--primary-blue);
    color: #ffffff;
}
.btn-blue-primary:hover{
    background-color: var(--primary-blue-dark);
    color: #ffffff;
}



ul.list-icon{
    padding-left: 25px;
    position: relative;
}
ul.list-icon li i{
    position: absolute;
    left: 0;

}
.uil-spiner {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    border: 4px rgba(192,192,192, .5) solid ;
    border-top: 4px #fff solid;
    border-radius: 50%;
    -webkit-animation: spCircRot 0.6s infinite linear;
    animation: spCircRot 0.6s infinite linear;
}

@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.input-group-sparator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #4b4b5a;
    text-align: center;
    white-space: nowrap;
    background-color: #f6f6f7;
    border-top: 1px solid #e2e7f1;
    border-bottom: 1px solid #e2e7f1;
  }
  .el-hide{
    display: none;
  }

.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #f6f6f7;
}
input[type="text"]:disabled {
    background: #f6f6f7;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: var(--primary-blue);
    color: var(--primary-yellow);

}

div.dataTables_processing { 
    z-index: 1; 
    color: var(--success);
    border: solid 1px var(--success);

}
label {
    font-weight: 500;
}
p.value{
    /* padding:0 !important; */
    margin:0 !important;
    font-weight: bold;
}
p.value ol{
    margin-left:0;
    margin-bottom:0px;
    padding-left:14px;
    padding-bottom:0px;
}
p.value ol li:only-of-type { 
    list-style-type: none; 
    margin-left: -15px;
}
.container-full {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}


.topnav{
    /* background-color: var(--us-blue); */
}
.navbar-custom{
    /* background-color: var(--us-blue);
    color: var(--primary-yellow); */
    /* background: linear-gradient(120deg, var(--primary-yellow),  var(--us-blue)); */
    /* background: linear-gradient(90deg, var(--primary-yellow), #e73c7e, #23a6d5, #23d5ab); */
    /* background-size: 400% 400%; */
    /* animation: gradient 15s ease infinite; */
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, var(--primary-blue) 50%, var(--primary-yellow) 50%);
    bottom:0;
    /* opacity:.5; */
    position:fixed;
    top:0;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
 
    50% {
        background-position: 100% 50%;
    }
 
    100% {
        background-position: 0% 50%;
    }
}
#menu-bar ul{
    /* background-color: var(--primary-yellow); */
}
.user-profile .pro-user-name{
    color: var(--primary-yellow);
}
.pro-user-desc{
    color: var(--primary-yellow);
    font-weight: 500
}
.navbar-custom .topnav-menu .nav-link svg{
    color: var(--white);
}
.text-logo{
    color: var(--primary-blue-dark);
    letter-spacing: 0px;
}
.btn-primary{
    background-color: var(--primary-blue);
}
.btn-primary:hover, .btn-primary:active{
    background-color: var(--primary-blue-dark);
} 
.page-title h4 {
    font-size: 17px;
    font-weight: 700;
  }
  .page-title{
    padding: 10px 0;
    color:var(--gray)
  }
@media only screen and (max-width: 600px) {
    .card-nav button{
        width: 100%;
        margin-bottom: 5px;
    }
}

legend {
    font-size: 15px;
    font-weight: bold;
}
  /* ---------------------qrcode scanner--------------------------- */
#video-container {
    width:100%; 
    min-height:400px; 
    margin-left:auto; 
    margin-right:auto;
    border: 1px solid rgba(75, 75, 90, 0.075);
    border-radius: 0.25rem;
    background-color: var(--dark);
    /* background-color: #6c757d; */
    margin-bottom: 10px;
    position: relative;
}
#video-container video{
    width:100%; 
    min-height:400px;
    border-radius: 0.25rem;
}
#video-container #no-camera{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:1em;
    text-align: center;
}
#video-container #no-camera i{
    font-size:3em;
}
  /* ---------------------qrcode scanner--------------------------- */


  .parallax {
    /* The image used */
    background-image: url('../img/bg0.jpg');
  
    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #000000;
    background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('https://localhost/dev/vaksinasi_internasional/assets/img/bg0.jpg');
    background-blend-mode: luminosity;
  }

.btn-default {
    color: #333;
}
.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
/* .btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
} */
.btn-default, .btn-default:focus, .btn-default.active, .open>.dropdown-toggle.btn-default {
    border-color: #e2e4e7 !important;
}
.card-header{
    background-color: #fff;
    border-bottom: 1px solid #e5e9ec
}

.switch-field {
	display: flex;
	margin-bottom: 0px;
	overflow: hidden;
    width: 100%;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	/* background-color: #e4e4e4; */
    background-color: transparent;
    border: 1px solid #e2e7f1;
	color: rgba(0, 0, 0, 0.6);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	padding: 0.5rem 0.75rem;
	margin-right: -1px;
	/* border: 1px solid rgba(0, 0, 0, 0.2); */
	/* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
	transition: all 0.1s ease-in-out;
    width: 50%;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: var(--primary-yellow);
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}
.switch-primary  input:checked + label {
	background-color: var(--primary-blue);
    color: var(--white);
	box-shadow: none;
}
.input-group-button{
    padding: 0;
}
.input-group-button button{
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
}
fieldset.bordered{
    border: 1px solid #e5e9ec;
    border-radius: 3px;
}
fieldset.bordered legend{
    margin-left: 5px;
    /* padding-left: 15px; */
    padding-right: 15px;
    margin-left: 15px;
    margin-right: 15px;
    /* width: auto; */
}
.btn-circle{
    border-radius: 50%;
    height: 25px;
    width: 25px;
    padding: 3px;
}

.tiny-caraousel .carousel-control-prev, .tiny-caraousel .carousel-control-next{
    position:relative;
    width: auto;
    font-size: 1.3em;
}
.bg-warning\/20 {
    background-color: rgb(var(--color-warning) / 0.2);
}
.border-warning {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-warning) / var(--tw-border-opacity));
}
.bg-danger\/20 {
    background-color: rgb(var(--color-danger) / 0.2);
}
.border-danger {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-danger) / var(--tw-border-opacity));
}
fieldset legend {
    border-bottom: 1px solid #e5e9ec;
}
.form-vertical .form-group {
    margin-bottom: 10px !important;
}
.form-vertical .form-group label {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem;
}
.form-vertical .form-group p.value{
    padding: 0 !important;
    margin: 0 !important;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-danger .close, .alert-danger .alert-link{
    color: #721c24;
}
.alert-heading{
    padding: 0;
    margin: 0;
    font-size: 15px;
}
.text-deleted{
    color: #90959b  !important;
    /* text-decoration: line-through; */
    font-style: italic;
}