@charset "UTF-8";

.input-svg-style.file::before {
    content: url("../img/file_green.svg");
}

.input-svg-style.delete::before{
    content: url("../img/delete_green.svg");}

.input-svg-style.add.fontcolor::before{
    content: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z' fill='%233a70b6'></path></svg>");
}

:root {
  --bs-key-color: #00855C ;
  --bs-hint-color: #00805C ;
  --bs-color-2: #FFFFC2;
  --bs-color-3: #C4EDD6;
  --bs-color-4: #f3fbf2;
}


.input-svg-style.prev::after{
    content: url('../img/prev.svg');
}

.urlShow::before{
    content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.917 2.5H12.292" stroke="%233a70b6" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.917 2.5V8.125" stroke="%233a70b6" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.417 10L16.9795 3.4375" stroke="%233a70b6" stroke-width="1.25" stroke-linecap="round"/><path d="M8.54199 4.375H2.91699V17.5H16.042V11.875" stroke="%233a70b6" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.urlCopy::before{
    content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z" fill="%233a70b6"/></svg>');
}

.qrShow::before{
    content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 11H11V3H3V11ZM5 5H9V9H5V5Z" fill="%233a70b6"/><path d="M3 21H11V13H3V21ZM5 15H9V19H5V15Z" fill="%233a70b6"/><path d="M13 3V11H21V3H13ZM19 9H15V5H19V9Z" fill="%233a70b6"/><path d="M21 19H19V21H21V19Z" fill="%233a70b6"/><path d="M15 13H13V15H15V13Z" fill="%233a70b6"/><path d="M17 15H15V17H17V15Z" fill="%233a70b6"/><path d="M15 17H13V19H15V17Z" fill="%233a70b6"/><path d="M17 19H15V21H17V19Z" fill="%233a70b6"/><path d="M19 17H17V19H19V17Z" fill="%233a70b6"/><path d="M19 13H17V15H19V13Z" fill="%233a70b6"/><path d="M21 15H19V17H21V15Z" fill="%233a70b6"/></svg>');
}

.downLoad-file::before{
    content: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 9H15V4C15 3.45 14.55 3 14 3H10C9.45 3 9 3.45 9 4V9H7.41C6.52 9 6.07 10.08 6.7 10.71L11.29 15.3C11.68 15.69 12.31 15.69 12.7 15.3L17.29 10.71C17.92 10.08 17.48 9 16.59 9ZM5 19C5 19.55 5.45 20 6 20H18C18.55 20 19 19.55 19 19C19 18.45 18.55 18 18 18H6C5.45 18 5 18.45 5 19Z" fill="%233a70b6"/></svg>');
}


input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #00855C ;
    box-shadow: 0 0 0 1px #00855C;
    border-radius: 6px;
}

input[type="radio"]:checked, input[type="checkbox"]:checked{
    background-color: #00855C ;
    border-color: #00855C ;
}

select:focus {
    border-color: #00855C ;
    box-shadow: 0 0 0 2px #00855C;
    border-radius: 2px;
}

textarea:focus {
    outline-color: #00855C ;
    border-color: #00855C ;
    background-color: #f3fbf2 ;
}

.radioAndCheckbox-outline:focus-within {
    outline: 1px solid #00855C  !important;
}

.btn-primary{
    background-color:#00855C ;
    border-color:#00855C ;
    color:#FFF ;
}
.btn-small-white {
    border-color:#00855C ;
    color:#00855C ;
}

.btn-large input{
    background-color:#00855C ;
    border-color:#00855C ;
    --bs-btn-color: #fff !important;
}

.breadcrumb-item-apply a:focus-visible {
    outline-color: #00855C ;
}
.drawer-content-title{
    color: #00855C;
}
.active>.page-link, .page-link.active {
    background-color:#00855C ;
    border-color: #00855C ;
}

.header_btn svg path {
    fill: #00855C  !important;
}

.header_btn_sub .font-color-primary:hover{
    color:#00855C ;
}
.l-footer__contact a:focus-visible{
     outline-color: #00855C ;
}
.font-color-primary{
    color:#00855C ;
}

.bg-color-primary{
    background-color:#00855C !important;
}

.bg-color-light{
    background-color:#FFFFC2 ;
}

.border-color-primary{
    border-color:#00855C ;
}

.login-main table{
     border-color: #00855C ;
}

.pagination strong {
    background-color: #00855C;
    border-color: #00855C;
}

.btn-small-bgWhite {
    border-color:#00855C ;
    color:#00855C ;
}
.btn-small-bgKeyColor {
    background-color:#00855C ;
    border-color:#00855C ;
    color: #fff;
}

.btn-large input[type="submit"]{
    color: #fff;
    border: 1px solid transparent;
}
.btn-tertiary:hover {
    color: #fff !important;
    border: 1px solid #222 !important;
    background-color: #00855C  !important;
}

.btn-tertiary:hover>svg>path, .btn-tertiary:hover>svg>g>path{
    fill:#fff !important;
}

.t_table table input[type="submit"]{
    padding: 0.5rem 1.3333rem;
    color: #222;
    border: 1px solid transparent;
    border-radius: 0.33333rem;
}
.tab-content>.active {
    background: #FFFFC2 ;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #00855C ;
    background-color:#FFFFC2 ;
    border-color:#FFFFC2 ;
}

.has-not-tab{
    background-color:#FFFFC2 ;
}

.etumo-table thead th { 
    background-color: #FFFFC2 ;
}

.etumo-table thead>tr {
    border-bottom-color:#00855C  !important;
}

.btn-sort.active svg path.bg {
    fill:#00855C ;
}
.etumo-info>div>svg>path{
    fill:#00855C !important;
}
.etumo-info>div>svg>rect{
    stroke:#00855C !important;
}

.error-top-box font{
    background-color:#FFFFC2;
}

.layout-left-title-span {
    color: #00855C ;
}
.layout-right-container .designPreview {
    line-height: 1.5;
}
.button-controls {
    border: 1px solid #00855C ;
    color: #00855C ;
}
.button-switch {
    color: #00855C ;
    border: 1px solid #00855C ;
}
.button-switch.active {
    background: #00855C ;
}
.list-item-container-highlighted {
    background-color: #FFFFC2 ;
}
.list-item-container.item-selected{
    background-color: #FFFFC2 ;
}

.list-item-container.item-selected .qrcode-background{
    background-color: #FFFFC2 !important;
}
.svg-fill {
    fill: #00855C  !important;
}
.svg-stroke {
    stroke: #00855C  !important;
}

.textarea-plugin:focus-within{
    outline-color: #00855C ;
    border-color: #00855C ;
}
.textarea-plugin .button-group .button-container:hover {
    background-color: #FFFFC2 ;
}

.textarea-plugin .button-group .button-container.active {
    background-color: #FFFFC2 ;
}

.button-container:focus-within{
    background-color: #FFFFC2 ;
}

.textarea-plugin .button-group .button-container:hover {
    background-color: #FFFFC2 ;
}

.textarea-plugin .button-group .font-size-container{
    background-color: #FFFFC2 ;
}

.textarea-plugin .button-group .font-size-container div:hover {
    background-color: #00855C 
}

.textarea-plugin .button-group .font-size-container div:focus-within{
    background-color: #00855C ;
}

.textarea-plugin .button-group .color-container{
    background-color: #FFFFC2 ;
}

.input-svg-style.add{
    background: #00855C;
}
.input-svg-style.add.fontcolor{
    color: #00855C;
}
.category-button-use{
    border: 1px solid #00855C;
    color: #00855C;
}

.category-button-no-use{
    color: #00855C;
    border: 1px solid #00855C;
}
.category-button-use-active{
    background: #00855C;
}
.input-svg-style {
    border: 1px solid #00855C ;
    color: #00855C ;
}
.input-svg-style.next{
    background: #00855C;
}
.input-svg-style.prev{
    color: #00855C;
}
.link-button:focus-visible{
    border: 1px solid #00855C !important;
}
.btn-large input[type="button"]{
    color: #fff;
    border: 1px solid transparent;
}
.classifyList{
    background-color: #FFFFC2;
}
.classify-add{
    background: #00855C;
    border: 1px solid #00855C;
}
.edit-cal-title{
    color:#00855C;
}
.condition-select-val{
    background:#C4EDD6;
}

.staffGroupTable th{
    border-bottom: 2px solid #00855C;
}
.search-number-of-items strong{
    background: #00855C;
}
.t_calender td.selected,
.facilitySelect_calender td.selected {
    background-color: #C4EDD6;
    color: rgba(0, 0, 0, 0);
}
.t_calender td.enable:hover,
.facilitySelect_calender td.enable:hover {
    background-color: #FFFFC2;
    cursor: pointer;
}
.t_calender td.selected:hover,
.facilitySelect_calender td.selected:hover {
    background-color: #C4EDD6;
    cursor: pointer;
}