@import './base.css';


:root {
  --inputs-border-radius: 8px;
  --input-height: 15px;
  /* btn colors */
  --btn-current-bg-color: var(--main-color);
  --btn-current-txt-color: var(--white-color);
}

/* common bottom margin  */
.date-picker,
.radio-box-group {
  margin-bottom: 1rem;
}

input {
  border: 0.5px solid;
  border-radius: var(--inputs-border-radius);
  border-color: var(--grey-color);
  /* padding: 5px; */
  width: 100%;
}

input:focus,
.form-select:focus {
  outline-width: 0;
  border: 0.5px solid;
  border-color: var(--secondary-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

.form-select {
  border-radius: var(--inputs-border-radius);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--secondary-color) 50%),
    linear-gradient(135deg, var(--secondary-color) 50%, transparent 50%),
    linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

.form-control {
  /* border-radius: 4px; */
  padding-left: 1.25rem;
}

.form-control:focus {
  border-color: var(--secondary-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}


/* date picker custom css */
input[type='date'] {
  text-align: center;
  border-radius: var(--inputs-border-radius);
  padding-top: .370rem;
  padding-bottom: .370rem;
}

input[type='date']::-webkit-calendar-picker-indicator {
  background: var(--secondary-color);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path><path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path><path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path></svg>');
  background-repeat: no-repeat;
  /* padding-left: 0.375rem; */

}

/* radio box group start*/

.radio-box-group {
  display: flex;
}

.radio-button {
  margin: 0 0 0 0;
  font-size: 2rem;
  width: 40px;
  height: 40px;
  position: relative;
}

.radio-button label,
.radio-button input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.radio-button input[type="radio"] {
  opacity: 0.011;
  z-index: 100;
}

.radio-box-group .radio-button:first-child {
  border-radius: 5px 0 0 5px;
}

.radio-box-group .radio-button:last-child {
  border-radius: 0 5px 5px 0;
}

.radio-box-group .radio-button:nth-child(odd) {
  background-color: var(--main-color);
}

.radio-box-group .radio-button:nth-child(even) {
  background-color: var(--secondary-color);
}


.radio-button input[type='radio']:not(:checked)+label {
  margin: 0px;
  /* width: 100%;
  height: 100%; */
  box-shadow: inset 40px 40px rgb(192, 192, 192);
  /* border: 1px red solid; */
}

.radio-button input[type="radio"]:checked+label {
  box-shadow: none;
  text-align: center;
  vertical-align: middle;
  font-size: large;
}

.radio-button label {
  cursor: pointer;
  z-index: 90;
  line-height: 1.8em;
  color: var(--white-color);
}


/* radio box group end*/

.btn{
  color: var(--white-color);
  border-radius: var(--inputs-border-radius);
  border: 0.1rem solid !important;
  border-color: var(--white-color);
  background-color: var(--btn-current-bg-color);
}

.btn-main-color {
  --btn-current-bg-color: var(--main-color);
  
}

.btn-green-color {
  --btn-current-bg-color: var(--green-color);
  /* color: var(--white-color);
  border-radius: var(--inputs-border-radius);
  border: 0.1rem solid !important;
  border-color: var(--white-color); */
}

.btn-red-color {
  --btn-current-bg-color: var(--red-color);
  /* color: var(--white-color);
  border-radius: var(--inputs-border-radius);
  border: 0.1rem solid !important;
  border-color: var(--white-color); */
}

.btn:hover {
  background-color: var(--white-color) !important;
  color: var(--btn-current-bg-color) !important;
  border: 0.1rem solid !important;
  border-color: var(--btn-current-bg-color) !important;

}

.selectize-input.focus{
  outline-width: 0;
  border: 0.5px solid;
  border-color: var(--secondary-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

.selectize-input{
  min-height: 38px;
  border-radius: var(--inputs-border-radius);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--secondary-color) 50%),
    linear-gradient(135deg, var(--secondary-color) 50%, transparent 50%),
    linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}


.vscomp-toggle-button{
  
  border-radius: var(--inputs-border-radius);
}

input[type="text"]{
  padding-left: 10px;
}

.vscomp-ele-wrapper:focus{
  min-height: 38px;
  outline-width: 0;
  border: 0.5px solid;
  border-radius: var(--inputs-border-radius);
  border-color: var(--secondary-color);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}