*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

:root {
    --theme-color : rgba(63, 65, 99, 1);
    --theme-color-rgba : rgba(44, 25, 114, .8);
    --hover-color : rgba(44, 25, 114, 0.8);
    --theme-color-rgb : 63, 65, 99;
}

body {
    background-color: #ece7e7dd;

  --heading-font: "Inter", sans-serif;
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Inter", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #747474;

  --bs-primary: var(--theme-color);
  --bs-primary-rgb:  63, 65, 99;
  
  --bs-secondary: #364127;
  --bs-secondary-rgb: 54, 65, 39;
  
  /* --bs-danger: #F95F09; */
  /* --bs-danger-rgb: 249, 95, 9; */

  /* --bs-success: #a3be4c; */
  /* --bs-success-rgb: 163, 190, 76; */
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;

  
  --bs-success-bg: #a3be4c;
  --bs-success-bg-rgb: 163, 190, 76;
  
  --bs-danger-bg: #F95F09;
  --bs-danger-bg-rgb: 249, 95, 9;
  
  --bs-border-color: var(--theme-color);
  --bs-border-color-rgb: var(--theme-color-rgb);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--theme-color);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--theme-color);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}

/* cutomize checkbox */
input[type='checkbox'] {
    width:1.5em;
    height:1.5em;
    accent-color: var(--theme-color);
    cursor: pointer;
}



input[type='checkbox']:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.navbar-expand-lg {
    background-color:var(--theme-color) !important;
}

.category-container{
    height: 90vh;
    max-height: 90vh;
}


.tags div {
    display: inline-block;
    color:white;
    margin: .5em;
}

.tags div p {
    background-color: #440708;
    color:white;
}


@media screen and (max-width: 768px) {
    .tags div {
        display: block;
    }
}

form .checked {
   color: gold;
}




ul.dropdown-menu li a:hover {
    background-color: var(--hover-color);
    color: white;
}

.form-control:focus, .form-select:valid:focus, .form-select:valid:hover  {
  border-color: var(--theme-color); /* Change the border color */
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(63, 65, 99, 0.5); /* Customize the shadow */
}

option:hover {
    background-color: #c51315;
    color: white;
}

.responsive-table-container {
    width: 100%;
    overflow-x: auto;
}


.responsive-font {
    font-size: clamp(0.8rem, 2vw, 1rem);  /* adjusts between 0.8rem to 1rem depending on screen */
}


div.left-sidebar ul li:hover {
    background-color: var(--hover-color);
    border:.5px solid #007bff !important;

}


.active {
    background-color: var(--hover-color) !important;
    color:#fff;
    border:.5px solid #007bff !important;

}


.show-hide{
    display: none;
}

/* # button to hide and show sidebar */
.sidebar-toggler{
    width:2em;
    height:2em;
    background-color: #fff;
    border-radius: 50%;
    color: var(--theme-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:60%;
    left:15%;
    cursor: pointer;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .sidebar-toggler{
       top:20%;
       left:90%;
    }
}


/* styling the side content */

#sidecontent{
    height: 100%;
    overflow-y: auto;
}

/* styling for thakyou.html page */
.thank-you{
    width: 90%;
    height: 100vh;
    background-image: radial-gradient(circle, #de1013, var(--theme-color));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.thank-you h1{
    color: #fff;
    font-size: 6vw;
    text-shadow: var(--theme-color) 2px 3px 4px;
}

/* feedback form styling */
.form-detail {
    background-image:linear-gradient(to left, rgba(63,65,99,.5)10%, var(--theme-color));

}


.fa-star{
    color: var(--theme-color);
}



.point-container div {
    width:30px;
    height: 30px;
    display: flex;
    justify-content: center; 
    align-items: center;
    border:1px solid var(--theme-color);
    color: var(--theme-color);
    font-weight: 600;
}

/* styling draggable slider */
.wrapper {
    padding:0 25px;
    margin: 1em;
    border : 1px solid var(--theme-color);
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
    background-color: #fff;
    border-radius: 50px;
}

.wrapper .arrows {
    position:absolute;
    top: 0;
    height: 100%;
    width: 100px;
    color: #fff;
    display: flex;
    align-items: center;
}



.arrows:first-child {
    left:0;
    display: none;
    background: linear-gradient(90deg, #fff 70%, transparent);
}



.arrows:last-child{
    right:0;
    justify-content: flex-end;
    background: linear-gradient(-90deg, #fff 70%, transparent);
}



.arrows:first-child i {
     margin-left:.5em;
}



.arrows:last-child i {
    margin-right:.5em;
}

.arrows i {
    font-size:1.2rem;
    width:55px;
    height:55px;
    border-radius:50%;
    line-height: 55px;
    text-align: center;
    background-color:#fff;
    cursor: pointer;
}

.arrows i:hover {
    background-color: #efedfb;
}

.wrapper .tab-box {
    display: flex;
    gap:12px;
    list-style: none;
    overflow-x: hidden;
    scroll-behavior: smooth;
    margin:0;
    padding:.5em;
}

.tab-box.dragging  {
    scroll-behavior: auto;
    cursor: grab;
}

.tab-box .tab {
    cursor: pointer;
    font-size:1.18rem;
    white-space: nowrap;
    background-color: #f5f4fd;
    padding:0 20px;
    border-radius: 30px;
    border:1px solid var(--theme-color);
    user-select: none;
}

.tab-box .tab:hover {
    display: block;
    background:var(--theme-color);
    color:#fff;
}

.tab-box .tab a:hover {
    display: block;
    background:var(--theme-color);
    color:#fff;
}

.tab-box.dragging .tab {
    user-select: none;
    pointer-events: none;
}

.errorlist li{
    color: red;
}

/* pending-form-list styling  */

.pending-form-list{
    display: flex;
    flex-direction: column;
}

.pending-form-list a{
    margin-top: 1px;
    text-decoration: none;
    color:blue;
}

.pending-form-list a:before {
    content:'🔗';
    display: inline-block;

    margin: .2em;
    border-radius: 50%;

}

/* setting-icon styling  */
.setting-icon {
    cursor: pointer;
    position:absolute;
    top:.3em;
    right:.3em;
}