:root{
    --c-body: #5a5a5a;
    --c-white: #fff;
    --c-light: #F5F5F5;
    --c-dark: #5A5A5A;
    --c-black: #222;
    --c-green: #00724b;
    --c-hover: #004930;
    --c-red: #cd0a0a;
    --c-blue: #00b8ff;
    --c-yell: #ffa500;
    --c-border: #E6E6E6;
    --c-tabs: #5A5A5A;
    
}


body,
html {
    font-family: 'Montserrat',sans-serif;
    color: var(--c-body);
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
}

.link {
    text-decoration: underline;
    
}
.link:hover{
    text-decoration: none;
}

.cursor {
    cursor: pointer
}

.bg-login{
    background: url(../themes/aruba/assets/img/homebg.jpg) 50% / cover no-repeat;
}

.bg-white {
    background-color: var(--c-white);
}

.bg-light {
    background-color: var(--c-light);
}

.bg-dark {
    background-color: var(--c-dark);
}
.bg-green {
    background-color: var(--c-green)
}
.bg-red {
    background-color: var(--c-red)
}
.bg-none{
    background-color: transparent;
    color: #000;
}
.bd-none{
    border: none!important;
}

.hr {
    width: 100%;

    border-bottom: 1px solid var(--c-border);
}

.pointer {
    cursor: pointer;
}

.op-75 {
    opacity: 0.75;
}

.op-50 {
    opacity: 0.5;
}

.op-25 {
    opacity: 0.25;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}


.c-red {
    color: var(--c-red)
}
.c-blue {
    color: var(--c-blue)
}
.c-yell {
    color: var(--c-yell)
}
.c-green {
    color: var(--c-green)
}

.c-white {
    color: var(--c-white)
}

.c-dark {
    color: var(--c-dark)
}

.c-black {
    color: var(--c-black)
}

.border {
    border: 1px solid var(--c-border);
}

.bdrs {
    border-radius: 0.5rem;
}
.bdrs-50{
    border-radius: 50rem;
}
.vat{
    vertical-align: top;
}

.por {
    position: relative;
}

.poa {
    position: absolute;
}

.start{
    left: 0;
}
.end{
    right: 0;
}
.top{
    top: 0;
}
.bottom{
    bottom: 0;
}

.over{
    background: var(--c-black);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.h1 {
    font-size: 2.5rem;
}

.h2 {
    font-size: 1.6rem;
}

.h3 {
    font-size: 1.4rem;
}

.h4 {
    font-size: 1.2rem;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-700 {
    font-weight: 700;
}

.fw-900 {
    font-weight: 900;
}

.center {
    text-align: center;
}

.right {
    text-align: right !important;
}

.big {
    font-size: 5rem;
}

.h-100 {
    min-height: 100%;
}
.h-100vh{
    min-height: 100vh;
}

.w-100 {
    width: 100%;
}

.button1 {
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 10rem;
    background: var(--c-green);
    color: #fff;
    transition: all 0.5s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight: 500;
}

.button1:hover {
    background: var(--c-hover);
}

.button1:active {
    transform: scale(0.95)
}
.button2 {
    
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 10rem;
    border: 1px solid var(--c-border);
    background: var(--c-light);
    color: var(--c-dark);
    transition: all 0.5s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight: 500;
}
.button2:hover {
    background: var(--c-green);
    color: var(--c-white);
}

.button2:active {
    transform: scale(0.95)
}


/*header*/

.header {
    z-index: 2;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--c-border);
}

.logout {
    border: 1px solid var(--c-border);
    display: inline-block;
    background: var(--c-light);
    border-radius: 50px;
    color: var(--c-black);
    font-weight: 500;
    transition: 0.5s all
}

.logout:hover {
    background: var(--c-green);
    color: var(--c-white);
}

.logout:active {
    transform: scale(0.95)
}

/*tabs*/
.tabs {
    display: flex;


}

.tabs a {
    background: var(--c-tabs);

    width: 100%;
    display: inline-flex;
    align-items: center;
    color: #fff;
    justify-content: center;

    transition: 0.5s all
}

.tabs a span {

    margin-right: 0.5em;
}


.tabs a:not(:first-child) {
    border-left: 1px solid var(--c-border);
}

.tabs a.active,
.tabs a:hover {
    background: var(--c-green);
}





.count {
    display: inline-block;
    position: absolute;
    right: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: var(--c-white);
    text-align: center;
    line-height: 1.5;
    font-weight: 700;
    top: 0;
    font-style: normal;
    background: var(--c-red);
}

.table tr td {
    border-top: 1px solid var(--c-border);
}

.material-icons-round {
    transform: scale(0.9)
}

.table tbody tr {
    cursor: pointer;
    transition: all 0.5s
}

.table tbody tr:hover {
    background: var(--c-light);

}

/* form control */
.por {
    position: relative;
}

.select {
    width: 95%;
    cursor: pointer;
    position: relative;
    border: none;
    padding: 0!important;
 
    
    box-sizing: border-box;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%2300724b"><path d="M479.8-348q-7.2 0-13.5-2.5T455-358L265.34-547.66Q254-559 254.5-573.5T266-599q11-11 25.5-11t25.5 11l163 164 164-164q11-11 25.5-10.5T695-598q11 11 11 25.5t-11.34 25.78L505-358q-5.4 5-11.7 7.5-6.3 2.5-13.5 2.5Z"/></svg>');
    background-position: calc(100% - 0.5rem) 50%;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-color: var(--c-white);
    color: var(--c-black)
}








select.dataTable-selector {
    padding: 0.5rem!important;
    padding-right: 1.5rem!important;
    background-position: calc(100% - 0.5rem)!important;
    border: 1px solid var(--c-border)!important;
    background-color: var(--c-white)!important;
    color: var(--c-black)!important;
    border-radius: 0.5rem;
}
input[type=password].dataTable-input,
input[type=text].dataTable-input,
input[type=number].dataTable-input,
input[type=tel].dataTable-input,
input[type=email].dataTable-input {
    padding: 0.5rem!important;
    padding-right: 1.5rem!important;
    border: 1px solid var(--c-border)!important;
    background: var(--c-white)!important;
    color: var(--c-black)!important;
   border-radius: 0.5rem;
}

.dataTable-sorter {
    padding-right: 1em;
}

.dataTable-table > thead > tr > th {
    border-bottom: none;
}

.dataTable-top {
    padding: 0;
    padding-bottom: 0.5em;
}


.dataTable-container{
    border-bottom: 1px solid var(--c-border)!important;
}


.dataTable-pagination a{
    background: var(--c-light)!important;
    border-radius: 0.25rem;
    color: var(--c-dark)!important
}
.dataTable-pagination .active a{
    background: var(--c-green)!important;
    color: #fff!important;
}
.dataTable-sorter:before{
    border-top: 4px solid var(--c-black);
}
.dataTable-sorter:after{
    border-bottom: 4px solid var(--c-black);
}

.copy,
.edit {

    cursor: pointer;
    user-select: none;
}

.copy:active,
.edit:hover {
    color: var(--c-green)
}


/*form control*/
.label {
    display: block;
    width: 100%;
}

.wrap{
        word-wrap: break-word;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

textarea,
input[type=password],
input[type=text],
input[type=number],
input[type=tel],
input[type=email],
select {
    
    border-radius: 0.5rem;
    padding: 1rem!important;
    border: 1px solid var(--c-border);
    background-color: var(--c-light);
    color: var(--c-black);
}

textarea,
input[type=password],
input[type=text],
input[type=number],
input[type=tel],
input[type=email],
select:not(.dataTable-selector) {
    width: 100%;
}



select {
    padding-right: 2em !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="%2300724b"><path d="M479.8-348q-7.2 0-13.5-2.5T455-358L265.34-547.66Q254-559 254.5-573.5T266-599q11-11 25.5-11t25.5 11l163 164 164-164q11-11 25.5-10.5T695-598q11 11 11 25.5t-11.34 25.78L505-358q-5.4 5-11.7 7.5-6.3 2.5-13.5 2.5Z"/></svg>');
    background-position: calc(100% - 0.5rem) 50%;
    background-size: 1.5rem;
    background-repeat: no-repeat;
}


/* content */
.content p{
    margin-bottom: 0.5em;
}
.content h2{
    font-weight: 500;
    font-size: 1.4rem;
        margin-bottom: 0.5em;
}
.content li{
    position: relative;
        margin-bottom: 0.5em;
        padding-left: 1em;
}
.content li:before{
    position: absolute;
    left: 0;
    top: 0.5em;
    content:"";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-green);
}
.content img{
    max-width:100%;
    margin-bottom: 0.5em;
}
.content a{
    color: var(--c-green);
    text-decoration: underline;
}
.content a:hover{
    text-decoration: none;
}


@media(min-width:992px) {

    .vline {
        border-right: 1px solid var(--c-border);
    } 

    .tabs a:first-child {
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .tabs a:last-child {
        border-radius: 0 0.5rem 0.5rem 0;
    }


}

@media(max-width:991px) {

    body,
    html {
        font-size: 14px;
    }

    main {
        overflow: hidden;
    }

    .logo img {
        height: 40px;
    }

    .tabs {
        flex-wrap: wrap;
    }

    .tabs a {
        width: 100%;
        justify-content: flex-start;
    }

    .tabs a:first-child {
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .tabs a:last-child {
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .table {
        width: 100%;
        overflow: scroll;
    }
    
    .dataTable-top{
        display:flex;
    }
/*     .dataTable-search, .dataTable-search input{
    width: 100%;
} */
}


/* new */
.fz-0{
    font-size: 0.85rem;
}
.fz-1{
    font-size: 1rem;
}
.fz-12{
    font-size: 1.2rem;
}
.fz-15{
    font-size: 1.5rem;
}
.fz-2{
    font-size: 2rem;
}
.lh-1{
    line-height: 1;
}
.bt{
    border-top: 1px solid var(--c-border);
}
.bb{
    border-bottom: 1px solid var(--c-border);
}

.m-count{
    font-size: 0.9rem;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50px;
    text-align: center;
    line-height: 1.2;
    position: absolute;
    font-weight: 700;
    left: 0;
    top: 0;
    color:#fff;
    transform: translate(-30%, -30%)

}


.faq i{
    display: inline-block;
    top: 0.1em;
    width: 1em;
    height: 1em;
    position: relative;
    margin-right: 0.5rem;
    
}
.faq i:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: var(--c-green);
    border-radius: 2px;
    transition: transform 0.3s
}
.faq i:before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    background: var(--c-green);
    border-radius: 2px;
    
}
.faq.active i:after{
    transform: rotate(90deg)
}

.popup{
    width: 100%;
    max-width: 640px;
}

.material-icons-round.inherit{
    font-size: inherit;
    transform: scale(1.2)
}

.ls{
    letter-spacing: 1rem;

}