.theme-light {
  --color-bg: #E3E6EC;
  --image-bg:none;
  --border-radius: 10px;
  --text-color: #212529;
  --filter-blur:none;
  --border:0;
  --box-shadow: 20px 20px 60px #c1c4c9, -20px -20px 60px #ffffff;
  
  /* input-container */
  --input-container-box-shadow: inset 18px 18px 30px #D1D9E6, inset -10px -10px 30px #FFFFFF;
  --input-border:1px solid #000000;
  
  /* timer-container */
  --timer-container-background: linear-gradient(145deg, #f3f6fd, #cccfd4);


  /* form-control */
  --transparent-bg: transparent;
  --btn-border: 1px solid rgba(0, 0, 0, 0.87);
  --btn-txt-color: rgba(0, 0, 0, 0.87);
  
  --active-word-color:#ffffff;
  --word-correct-text-color: #84DFAB;
  --word-error-text-color: #FF8A8A;

  --single-history-item-border: 1px solid rgba(0, 0, 0, 0.38);
  --single-history-item-border-radius: 10px;
  
  --topnav-background: #E3E6EC;
  --topnav-box-shadow: 28.6154px 28.6154px 31.7949px #D1D9E6, -28.6154px -28.6154px 31.7949px rgba(255, 255, 255, 0.5);
  --topnav-border-radius: 10px;
  --topnav-text-color: #212529;
  
  --main-container-bg:transparent;
  --main-container-padding:0;

}

.theme-dark {
  --color-bg: #202020;
  --image-bg:url('https://res.cloudinary.com/eduportalbd/image/upload/v1636398945/prallaxbg_dnhkxh.jpg');
  --border-radius: 10px;
  --text-color: #ffffff;
  --filter-blur:blur(20px);
  --border: 2px solid rgba(139,139,139,.19);
  --box-shadow: none;
  
  /* input-container */
  --input-container-box-shadow: none;
  --input-border:1px solid #ffffff;
  
  /* timer-container */
  --timer-container-background:rgba(43, 41, 41, 0.51);


  /* form-control */
  --transparent-bg: transparent;
  --btn-border: 1px solid rgb(255, 255, 255);
  --btn-txt-color: rgb(255, 255, 255);
  
  --active-word-color:#2E6CD8;
  --word-correct-text-color: #4192641f;
  --word-error-text-color: #f74c4c;

  --single-history-item-border: var(--border);
  --single-history-item-border-radius: 10px;
  
  --topnav-background:rgba(43, 41, 41, 0.51);
  --topnav-box-shadow: none;
  --topnav-border-radius: 10px;
  --topnav-text-color: #ffffff;
  
  --main-container-bg:rgba(43, 41, 41, 0.51);
  --main-container-padding:1.5rem;
}

body {
  background-color: var(--color-bg);
  background-image: var(--image-bg);
  background-attachment: fixed;
  background-size: cover;
  color: var(--text-color);
}

#pro-banner, .btn-sec{
  background-color: #16a34a25;
  color: var(--text-color);
  border: none;
}

.main-container{
  background: var(--main-container-bg);
  padding: var(--main-container-padding);
  backdrop-filter: var(--filter-blur);
  border-radius: var(--border-radius);
  border: var(--border);
}
.section-title{
  color: var(--text-color);
}
.text-container {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

#result-container {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.input-container {
  border-radius: var(--border-radius);
  box-shadow: var(--input-container-box-shadow);
  border: var(--input-border);
  background-color: var(--color-bg);
}

.timer-container {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--timer-container-background);
  backdrop-filter: var(--filter-blur);
  border: var(--border);
}

.form-control {
  background-color: var(--transparent-bg);
  border: none;
}

.form-control:focus {
  color: var(--text-color);
  background-color: var(--transparent-bg);
  border-color: var(--transparent-bg);
  outline: 0;
  box-shadow: none;
}

#span-timer {
  font-size: 32px;
  font-weight: 500;
}

.tagcloud01 ul li {
  display: inline-block;
  margin: 0 .3em .3em 0;
}

.tagcloud01 ul li {
  display: inline-block;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: .2s;
  transition: .2s;
}

.word {
  color: var(--text-color);
  padding: 5px 15px 5px 15px;
  border: var(--btn-border);
  border-radius: 10px;
}

.word-active {
  background: var(--active-word-color);
  box-shadow: 0px 12px 20px rgba(7, 7, 7, 0.2);
  border-radius: 10px;
  border: 0;
}

.word-error {
  background: var(--word-error-text-color);
  border: 0;
  box-shadow: 0px 12px 20px rgba(7, 7, 7, 0.2);
}

.word-correct {
  background: var(--word-correct-text-color);
  box-shadow: none;
  border: 0;
}

.word-incorrect {
  background-color: #FF8A8A;
  color: #000000;
  text-decoration: line-through;
  border: 0 !important;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--text-color);
  background-color: #fff;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.btn-outline-danger {
  border: var(--btn-border);
  color: var(--btn-txt-color);
  border-radius: var(--border-radius);
}

.form-select {
  width: auto;
  background-color: var(--transparent-bg);
  border: var(--btn-border);
  border-radius: var(--border-radius);
  color: var(--text-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='grey' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='grey' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
;
  transition: transform .2s ease-in-out;
}
option {
  background-color: var(--color-bg);
  color: var(--text-color);
}
.single-history-item {
  border: var(--single-history-item-border);
  border-radius: var(--single-history-item-border-radius);
  padding: 20px;
}

.accordion-item {
  background-color: var(--transparent-bg);
  border: none;
}

.accordion-button, .accordion-button:not(.collapsed), .accordion-button:focus {
  background-color: var(--transparent-bg);
  box-shadow: none;
}

.topnav {

  background: var(--topnav-background);
  box-shadow: var(--topnav-box-shadow);
  border-radius:var(--topnav-border-radius) ;
  backdrop-filter: var(--filter-blur);
  border: var(--border);
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link  , .navbar-light .navbar-brand{
  color:var(--topnav-text-color);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white url('https://i.ibb.co/FxzBYR9/night.png');
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--transparent-bg);
}
#result-container > table > tbody >tr > th, td {
  color: var(--text-color);
}