.main_label{
    display: inline-block;
    font-size: medium !important;
    font-weight: 700 !important;
    /* color: #dd4124 !important; */
    margin-bottom: 4px;
}
.hidden{
    display: none !important;
}
.header{
    font-size: medium;
    text-align: center;
    color: #4d4f6b;
    font-weight: 800;
}
#navbarDropdownMenuLink{
    color: green;
    font-size: large;
    font-weight: 600;
}
.display-inline-flex{
    display: inline-flex !important;
}
.float-right{
    float: right !important;
}
.text-bold{
    text-decoration: solid !important;
}
p[class$="error"] {
    color: #dd4124;
}
.error-input{
    border: 1px solid red;
}
.table-header{
    background-color: #a4b1c8;
    vertical-align: unset !important;
    text-align: center;
    font-size: 12px;
    font-family: sans-serif;
    position: sticky;
    top:0px;
}
.color-white{
    color: #353131 !important;
}
.upload-type{
    border: 2px solid darkgray;
    border-radius: 50%;
    padding: 2px;
    color: #E6B221 !important;
    font-size: larger;
    font-weight: bold;
}
.ml-5{
    margin-left: 5pt;
}
.mr-5{
    margin-right: 5pt;
}
.blue-color {
    color:blue;
}

.green-color {
    color:green;
}
.tomoto-color{
    color: tomato;
}

.teal-color {
    color:teal;
}
.deeppink-color {
    color:deeppink;
}
.pink-color{
    color: pink;
}
.red-color {
    color:red;
}
.maroon-color{
    color: #c34215;
}

/*Icon progressbar*/
#progressbar {
    margin-bottom: 10px;
    overflow: hidden;
    color: lightgrey;
    position: relative;
    text-align: center;
    z-index: 9999;
}

#progressbar .active#status-draft{
    color: #4f4fc2;
    position: relative;
    text-align: center;
}
#progressbar .active#status-pending-for-review{
    color: teal;
    position: relative;
    text-align: center;
}
#progressbar .active#status-ready-for-process{
    color: deeppink;
    position: relative;
    text-align: center;
}
#progressbar .active#status-completed{
    color: rgb(64, 136, 64);
    position: relative;
    text-align: center;
}
#progressbar .active#status-in-progress{
    color: #c34215;
    position: relative;
    text-align: center;
}
#progressbar .active#status-failed{
    color: rgb(240, 66, 66);
    position: relative;
    text-align: center;
}

#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400;
}

/*Icons in the ProgressBar*/
#progressbar #status-draft:before {
    font-family: FontAwesome;
    content: "\f115";
}

#progressbar #status-pending-for-review:before {
    font-family: FontAwesome;
    content: "\f04c";
}

#progressbar #status-ready-for-process:before {
    font-family: FontAwesome;
    content: "\f256";
}

#progressbar #status-in-progress:before {
    font-family: FontAwesome;
    content: "\f252";
}
#progressbar #status-completed:before {
    font-family: FontAwesome;
    content: "\f00c";
}

#progressbar #status-failed:before {
    font-family: FontAwesome;
    content: "\f05e";
}

/*Icon ProgressBar before any progress*/
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 0px 16px;
}

/*ProgressBar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}

/*Color number of the step and the connector before it*/
#progressbar li.active#status-draft:before, #progressbar li.active#status-draft:after {
    background:#4f4fc2;
}
#progressbar li.active#status-pending-for-review:before, #progressbar li.active#status-pending-for-review:after {
    background: teal;
}
#progressbar li.active#status-ready-for-process:before, #progressbar li.active#status-ready-for-process:after {
    background:deeppink;
}
#progressbar li.active#status-in-progress:before, #progressbar li.active#status-in-progress:after {
    background:#c34215;
}
#progressbar li.active#status-completed:before, #progressbar li.active#status-completed:after {
    background:rgb(64, 136, 64);
}
#progressbar li.active#status-failed:before, #progressbar li.active#status-failed:after {
    background:rgb(240, 66, 66);
}

/*Animated Progress Bar*/
.progress {
	height: 20px;
    margin-bottom: 15px;
}

.progress-bar {
	background-color: #673AB7;
}

.progress-bar-draft{
    width: 20%;
    background-color: #4f4fc2;
}
.progress-bar-pending-for-review{
    width: 40%;
    background-color: teal;
}
.progress-bar-ready-for-process{
    width: 60%;
    background-color: deeppink;
}
.progress-bar-in-progress{
    width: 80%;
    background-color: #c34215;
}
.progress-bar-completed{
    width: 100%;
    background-color: rgb(64, 136, 64);
}
.progress-bar-failed{
    width: 100%;
    background-color: rgb(240, 66, 66);
}

/*Fit image in bootstrap div*/
.fit-image{
    width: 100%;
    object-fit: cover;
}
a{
    text-decoration: none !important;
}
.w-50{
    width: 50% !important;
}
.w-40{
    width: 40% !important;
}
.w-30{
    width: 30% !important;
}
.w-20{
    width: 20% !important;
}
.w-25{
    width: 25% !important;
}
.w-10{
    width: 10% !important;
}
.display-inline-block{
    display: inline-block !important;
}
table{
    font-size: smaller;
}
.dashboard-icon{
    width: -webkit-fill-available !important;
}
.font-larger{
    font-size: larger;
}
.font-x-large{
    font-size: x-large;
}
.font-xxx-larger{
    font-size: xxx-large;
}
.dashboard-body{
    background-color: darkgrey;
}
.font-bolder{
    font-weight: bolder;
}
svg > g > g.google-visualization-tooltip { pointer-events: none }

.question-div{
    font-size: large;
    padding: 5px;
    background-image: linear-gradient(to right, #a9acd6, #babacc, #6d8f8f);
    color: white;
    float: right;
    border-end-end-radius: 10px;
    border-start-end-radius: 10px;
    border-end-start-radius: 10px;
    border-start-start-radius: 10px;
}
.answer-div{
    border: 1px solid gray;
    padding: 5px;
    margin: 5px;
    float: left;
    background-color: #f6f0f0;
    border-end-end-radius: 10px;
    border-start-end-radius: 10px;
    border-end-start-radius: 10px;
    border-start-start-radius: 10px;
}
.question-answers-div{
    max-height: 550px;
    overflow-y: scroll;
}

.home-table-action-column{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-table-delete-column {
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: center;      /* center vertically */
}

.form-switch.form-switch-lg .form-check-input {
    width: 3em;
    height: 1.5em;
}
.form-switch.form-switch-lg .form-check-input:checked {
    background-color: #0d6efd;
}


/* Slider */

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
  }

  .slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #4CAF50;
  }

  input:checked + .slider:before {
    transform: translateX(26px);
  }

  .slider.round {
    border-radius: 24px;
  }
  .bg-black{
    background-color: black !important;
  }
  .bg-lightgray{
    background-color: #F0F0F0 !important;
  }
  .bg-darkgray{
    background-color: #333333 !important;
  }
  .btn-xs{
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 0.2rem;
  }
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.font-semibold {
    font-weight: 600;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.border {
    border-width: 1px;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.highlight {
    background-color: yellow;
    font-weight: bold;
    color: black;
}
pre {
    white-space: pre-wrap;
}

.font-smaller{
    font-size: smaller !important;
}