/* -----------------------------------------------------------------------------------

Template Name: Jaravel
Template URI: https://jasterweb.com
Description: This is Admin theme
Author: JTR
Author URI: https://instagram.com/jasterweb

-----------------------------------------------------------------------------------
*/

:root {
--container:1140px;
--color-main: #556B2F;
--color-main-hov: #cedbb994;
--color-secondary: #87BBA2;
--color-accent: #C9E4CA;
--color-danger: #eb2f06;
--color-warning: #eab308;
--color-warning-hov: #e9cc746f;
--color-private: #CF9412;
--color-private-hov: #e9d5afa9;
--color-info:#4c75cf;
--color-info-hov:#a4bcef77;
--color-success:#22c55e;
--color-success-hov:#77ca957a;
--width-nav:270px;
--color-save-danger:#ffe4de


--font-title:Rubik;
--font-body:Inter;
}


h1,h2,h3,h4,h5,h6{font-weight: 600;font-family: var(--font-title)}
body {
    font-size: 16px;
    overflow-x: hidden;
    font-family: var(--font-body);
    color: #2F2F3B;
    background:#F8F8FC;
    margin:0;
}

ul {
    padding-left: 0px;
    list-style-type: none;
    margin-bottom: 0;
}

* {
    box-sizing: border-box;
}

* a {
    color: var(--color-main);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--color-main);
}
a[class*=badge-]:hover {
    color: #fff;
}
.app{background-color: #f0f6f9;}
.container{max-width:var(--container);margin: 0 auto;}
.container.smallwrap{max-width: 650px !important;}
.authpage{display:flex;align-items:center;justify-content:center;height:100vh}

.wrapauth{box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4) !important; background: #fff; padding: 2rem; width: 100%; display: inline-block; position: relative; overflow: hidden;}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}
.text-justify{text-align:justify}

.m-t-15{margin-top:15px !important}.m-l-15{margin-left:15px !important}.m-r-15{margin-right:15px !important}.m-b-15{margin-bottom:15px !important}
.m-t-20{margin-top:20px !important}.m-l-20{margin-left:20px !important}.m-r-20{margin-right:20px !important}.m-b-20{margin-bottom:20px !important}
.m-t-30{margin-top:30px !important}.m-l-30{margin-left:30px !important}.m-r-30{margin-right:30px !important}.m-b-30{margin-bottom:30px !important}
.m-t-40{margin-top:40px !important}.m-l-40{margin-left:40px !important}.m-r-40{margin-right:40px !important}.m-b-40{margin-bottom:40px !important}
.m-t-10{margin-top:10px !important}.m-l-10{margin-left:10px !important}.m-r-10{margin-right:10px !important}.m-b-10{margin-bottom:10px !important}
.m-t-7{margin-top:7px !important}.m-l-7{margin-left:7px !important}.m-r-7{margin-right:7px !important}.m-b-7{margin-bottom:7px !important}
.p-t-15{padding-top:15px !important}.p-l-15{padding-left:15px !important}.p-r-15{padding-right:15px !important}.p-b-15{padding-bottom:15px !important}
.p-t-10{padding-top:10px !important}.p-l-10{padding-left:10px !important}.p-r-10{padding-right:10px !important}.p-b-10{padding-bottom:10px !important}
.m-0{margin:0 !important}
.p-0{padding:0 !important}

.flex-between{display:flex;justify-content:space-between;align-items:center}
.logoauth{display:inline-block;margin-bottom:2rem;width:100%}
.logoauth img{width:300px}
.wsmall{display:flex;flex-direction:column;align-items:center;max-width:450px;width:100%}
.formgroup{display:flex;flex-direction:column;margin-bottom:1.5rem}
.wrapauth h2{font-size:1.7rem;margin-bottom:2rem;text-transform:uppercase;margin-top:0}
.formgroup label{display: flex; font-weight: 600; margin-bottom: 10px; font-size: 16px; align-items: center; justify-content: space-between;}
.formgroup input{font-size: 16px;padding:1rem;border:1px solid rgba(1,1,1,0.22);border-radius:6px}
.formgroup textarea{font-size: 16px;padding:1rem;border:1px solid rgba(1,1,1,0.22);border-radius:6px}
.formgroup input::placeholder{font-size:1rem;letter-spacing:.7px;color:rgba(1,1,1,0.72)}
.formgroup input:focus-within{border: 1px solid var(--color-secondary);}
.formgroup select{font-size: 15px;padding:1rem;border:1px solid rgba(1,1,1,0.22);border-radius:6px;background: white;}

.btx{font-family: var(--font-body);display:inline-flex;font-size:16px;padding:14px 26px;position:relative;transition:all .3s ease;cursor:pointer;border-style:solid;border-width:1px;border-radius:7px;grid-gap: 7px;align-items: center;}
.btx svg{width: 20px;}
.btx-primary{background:var(--color-main);border-color:#fff;color:#fff}
.btx-primary:hover{color: #fff; background: #6b7f48;}
.btx-secondary{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}
.btx-secondary:hover{color: var(--color-secondary); background: transparent;}
.btx-accent{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.btx-accent:hover{color: var(--color-accent); background: transparent;}
.btx-danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}
.btx-danger:hover{color: var(--color-danger); background: transparent;}
.btx-warning{background:var(--color-warning);border-color:var(--color-warning);color:#fff}
.btx-warning:hover{color: var(--color-warning); background: transparent;}
.btx-info{background:var(--color-info);border-color:var(--color-info);color:#fff}
.btx-info:hover{color: var(--color-info); background: transparent;}
.btx-success{background:var(--color-success);border-color:var(--color-success);color:#fff}
.btx-success:hover{color: var(--color-success); background: transparent;}
.btx-light{background:#f1f5f9;border-color:#f1f5f9;color:#0f172a}
.btx-light:hover{color: #0f172a; background: transparent;}
.btx-dark{background:#0f172a;border-color:#0f172a;color:#fff}
.btx-dark:hover{color: #0f172a; background: transparent;}


.btx-link{padding:0;border:0;color:var(--color-main)}
.btx-ic{padding: 7px 11px;}

.redalert{color: var(--color-danger); display: flex; align-items: center; gap: 7px;}
.redalert svg{width: 20px;}

.gap1{grid-gap:1rem}

.wrapper{display:flex}

.logonav{text-align: center;}
.sidebar{width:var(--width-nav);position:fixed;z-index:105;top:0;bottom:0;left:0;background:#152133;transition: all .3s ease-in-out;}
.navmenu li a{display:flex;align-items:center;color:#fff;grid-gap:10px;padding:14px 1rem;border-radius:6px;transition: all .3s ease-in-out;}
.navmenu li a:hover{background: rgba(255, 255, 255, 0.15);}
.navmenu li{margin-bottom:8px}
.navmenu li a svg{width:22px}
.navmenu{margin-top:1rem;border-top:1px solid rgba(255,255,255,0.19);padding-top:1rem}
.navcat{padding-left: 1rem; color: rgba(255, 255, 255, 0.64); margin-top: 2rem;}

.modal-help.active{display:flex}.modal-help{display:none;z-index:999;position:fixed;top:0;left:0;background:rgba(1,1,1,0.74);align-items:center;justify-content:center;width:100%;height:100vh}.modalwrap{position:relative;display:none;background:#fff;max-width:550px;padding:2rem;border-radius:8px;font-size:15px}.modalwrap.active{display:inline-flex!important}
.btx-close{position:absolute;top:-10px;right:-10px;font-size:2rem;color:#fff;background:var(--color-danger);transition: all .3s ease-in-out;height:2.5rem;width:2.5rem;border-radius:100%;display:flex;align-items:center;justify-content:center}.btx-close:hover{background:var(--color-warning);color:#333}
.modalwrap p{margin:0;line-height:28px}

.logonav img{width:90%}
.wrapnav{padding: 1.5rem;}
.main{width:100%;transition:all .3s ease-in-out;top:-3.5rem;position:relative;z-index:2;padding-bottom:2rem;overflow: hidden;}
.app-header{width:100%;background:var(--color-main);padding:2rem 0 5.5rem}
.logo-header a{justify-content:center;display:flex}.logo-header img{width:200px}
.profile{display:flex;align-items:center;grid-gap:10px}
.profile img{width:40px;border-radius:6px;height:40px;object-fit:cover}
.profile span{font-size:16px}
.app-header h2{margin:0}

.main .wrap{min-height: calc(100vh - 70px - 50px); padding-top: 2rem;}
.smallwrap .container{width:50rem}
.footer{padding: 1rem 0;}


.row{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap: 2rem;margin-bottom: 2rem;}
.col1{grid-column: span 1;}
.col2{grid-column: span 2;}
.col3{grid-column: span 3;}
.col4{grid-column: span 4;}
.col5{grid-column: span 5;}
.col6{grid-column: span 6;}
.col7{grid-column: span 7}
.col8{grid-column: span 8}
.col9{grid-column: span 9}
.col10{grid-column: span 10}
.col11{grid-column: span 11;}
.col12{grid-column: span 12;}

.flex-center{display: flex;align-items: center;}
.center{justify-content: center;display: flex;}
.flexcol{display: flex;flex-direction: column;}

.card{background:#fff;position:relative;display:flex;flex-direction:column;border-radius:.25rem;border:1px solid #E1E8F0}
.card-header h3{margin:0}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px solid #E1E8F0}
.card-body{padding:1rem}
.card-body p{margin:0;line-height: 24px;}
.card-body ol{margin:0;padding-left:1rem;display:flex;flex-direction:column;grid-gap:8px}

table{background: #fff;text-indent:0;border-color:inherit;border-collapse:collapse;width:100%}
.table th{padding-left:1.5rem;padding-right:1.5rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase}
.table thead{background:#f8fafc}
.table tbody td{white-space:nowrap;padding:1rem 1.5rem;font-size:15px;line-height:1.25rem}
.table tbody tr{border-bottom:1px solid rgba(1,1,1,0.14)}
.table thead{border-bottom:1px solid rgba(1,1,1,0.14)}
.table tbody tr{transition: all .2s ease-in-out;}
.table tbody tr:last-child{border:0}
.table-strip tbody tr:nth-child(2n),.table-hover tbody tr:hover{background-color:rgba(0,0,0,0.04)}
table.dataTable{margin:1.5rem 0 !important}
.dataTables_length{display:flex;float:none!important}
table.dataTable.no-footer{border-bottom:1px solid rgba(0,0,0,0.12)}
#dtbasic th{border-bottom:1px solid rgba(1,1,1,0.24);padding:1rem}
table.dataTable td{padding:1rem!important}
.thead th{padding:1rem 1.5rem!important;background:#f7f7f8;font-size:14px}
.end{text-align: right !important;}
.duobtx{display:flex;justify-content:end;grid-gap:10px;align-items:center}

.btx-back{background:var(--color-warning);border-color:var(--color-warning)}
.btx-back:hover{background:var(--color-danger);border-color:var(--color-danger)}
.btx-back svg{stroke:#fff}

.top-title h2{margin-left:10px}

.sidebar.show{margin-left: -100%;}
.main.on{margin-left: 0;}
.toggle-menu:hover svg{stroke: var(--color-main);}

.page-title{display:flex;justify-content:space-between;align-items:center;margin: 3rem 0 0;}
.page-title h2{margin:0;color:#fff;font-size:1.7rem;width:100%;display:flex;align-items:center;grid-gap:7px}
.page-action{display:flex;align-items:center;grid-gap:1rem}
.page-action .btx{padding: 10px 2rem;}
.page-title-center{justify-content:center!important}
.page-title-center .page-action{display:none!important}.page-title-center h2{justify-content:center!important}

.btx-help{display:inline-flex;color:var(--color-warning);transition:color .3s ease-in}
.btx-help svg{width:1.4rem;height:1.4rem}
.btx-help:hover{color:#fff}

.form-group{margin-bottom:1rem;display:flex;flex-direction:column;grid-gap:10px}
.form-group input, .form-group textarea{font-size: 16px;font-family: var(--font-body);padding:16px 12px;border:1px solid #d5dde7;border-radius:6px;background:#fff;width: 100%;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}
.form-group select{font-size: 16px}
.theme-form{padding:1.8rem;background:#fefeff;border-radius:10px;box-shadow:0 3px 5px #0000000b}
.form-group input::placeholder{letter-spacing:.4px;font-size:14px;color:rgba(1,1,1,0.78)}
.form-icon{display:flex;align-items:center;background:#fff;border:1px solid #d5dde7;border-radius:6px}
.form-icon input{background:transparent;border:0;}
.form-icon span{border-right:1px solid #d5dde7;padding:8px 12px}
.form-group select{padding:16px 12px;border:1px solid #d5dde7;border-radius:6px;background:#fff}
.btx.w100{justify-content:center;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.form-group input:disabled{background:rgba(0,0,0,0.05);border-color:rgba(1,1,1,0.13)}
.form-group input[type="file"]{background:#f4f8fe}
.form-group label{display:flex;align-items:center;justify-content:space-between}
.form-group label span{font-size: 13px;}
.form-radio{display:flex;width:100%;grid-gap:15px}
.form-radio label input{width:unset;margin:0 5px 0 0}
.form-check{display:inline-flex;align-items:center}
.form-check input{margin:0 7px 0 0}
.form-check-group{display:flex;grid-gap:1rem}

.wraptutorial{max-width:850px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:2rem;margin:0 auto}
.listdoc{display:grid;grid-auto-flow:dense;grid-gap:10px;margin:0}
.listdoc li a{padding:15px 20px;display:inline-block;width:100%;background:var(--color-main);color:#fff;border-radius:4px;transition: all .3s ease-in-out;}
.listdoc li a:hover{background:var(--color-secondary)}
.docx{background:#fff;padding:1rem 1.3rem}
.docx p:first-child{margin:0}
.docx p{line-height:26px;font-size:15px}
.docx img{width:100%}



.user-down{display: none;}
#user-menu{display:flex;align-items:center;grid-gap:10px}
.user-down.show{display: block;}
.user-down{position:absolute;top:60px;right:0;background:#fff;width:10%;z-index:10;box-shadow:0 5px 20px -5px rgba(1,1,1,0.14);border-radius:0 0 0 10px}
.user-down ul{margin:0}
.user-down ul li a{padding:14px 1rem;color:#333;width:100%;display:flex;align-items:center;grid-gap:10px}
.user-down li a svg{width:18px}
.user-down li a:hover{color:var(--color-main)}

.error-zone span{padding:15px;display: flex;margin-bottom:2rem}
.error-zone .text-danger{background:rgb(255, 238, 234);color:var(--color-danger)}


@media (min-width:768px){
    .split{display:flex;grid-gap:1rem}
.split .form-group{width:100%}
.close-menu{display: none;}
}
@media (max-width:768px){
    .container{max-width: 94%;}
    .page-action .btx{padding: 6px 1.4rem;}.page-action{grid-gap:10px}
    .wraptutorial{grid-template-columns:unset;grid-gap:1rem}
    .wraptutorial .col3,.wraptutorial .col9{width:100%;grid-column:span 12}
    .footer p{text-align: center;line-height: 20px;font-size: 14px;}
    .container.smallwrap{padding: 0 15px;}
    .theme-form{padding: 1rem;}
    .wrapnav{padding:1rem}
    .sidebar{margin-left:-100%;width: 80%;}.main{margin-left:0}
    .mob12{grid-column:span 12}.row{grid-gap:10px}
    .sidebar.show{overflow-y: auto;margin-left: 0;}
    .logonav{display:flex;align-items:center;justify-content:space-between}
    .logonav a{width:68%}.close-menu svg{stroke:#fff;transition: all .3s ease;}
    .close-menu:hover svg{stroke: var(--color-secondary);}
    .mob1{grid-column: span 12;}
    .mob2{grid-column: span 6;}
    .mob3{grid-column: span 4;}
    .mob4{grid-column: span 3;}
    .profile span{display: none;}
    .user-down{right:0;width:42%}
}