/*! -----------------------------------------------------------------------------------

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

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

:root {
--container:95%;
--color-main: #00ADEF;
--color-secondary: #EC9A29;
--color-accent: #a55eea;
--color-danger: #eb2f06;
--color-warning: #eab308;
--color-info:#4c75cf;
--color-success:#22c55e;
--width-nav:270px;


    --font-title:Red Hat Display;
    --font-body:Inter;
}


h1,h2,h3,h4,h5,h6{font-weight: 600;font-family: var(--font-title);letter-spacing: 0.3px;}
body {
    font-size: 14px;
    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;}
.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}

.toTop{background-color:var(--color-secondary);color:#fff;cursor:pointer;position:fixed;bottom:20px;left:20px;z-index:999;
	opacity:0;transform:translateY(100px);transition:all .5s ease;text-align:center;padding:12px;border-radius:100px;display:flex;align-items:center;justify-content:center}
.toTop:hover{background:var(--color-main);color:#fff}
.toTopShow{opacity:1;transform:translateY(0)}
.toTop-right{left:unset;right:20px}

.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-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:150px}
.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,.formgroup textarea{font-family:var(--font-body);width: 100%;font-size: 16px;padding:1rem;border:1px solid rgba(1,1,1,0.22);border-radius:6px}
.formgroup input::placeholder,.formgroup-prefix 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);}
.adm .formgroup input{font-size: 18px;padding:1rem;border:1px solid rgba(157, 157, 157, 0.22);border-radius:6px;background:#2A2A2A;color:white;}
.adm .formgroup input::placeholder{font-size:1rem;color:rgba(255, 255, 255, 0.72)}

.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:var(--color-main);color:#fff}
.btx-primary:hover{color: var(--color-main); background: transparent;}
.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:#1D2D44;transition: all .3s ease-in-out;}
.navmenu li a{font-size: 16px;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 li a b{padding:7px;background:var(--color-danger);border-radius:100%}
.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;}


.logonav img{width:60%}
.wrapnav{padding: 1.5rem;}
.main{margin-left: var(--width-nav);width: 100%;transition: all .3s ease-in-out;}
.app-header{width: 100%; background: #fff; padding: 10px 0;}
.app-header .container{display: flex; align-items: center; justify-content: space-between;}
.app-header{width:100%;background:#fff;padding:10px 0}
.profile{display:flex;align-items:center;grid-gap:10px}
.profile img{border: 1px solid #33333336;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;}

.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;}

.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:.875rem;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{text-align: right;display: flex;justify-content: end;grid-gap: 10px;}

.btx-back{background:var(--color-danger);border-color:var(--color-danger)}
.btx-back:hover{border-color:var(--color-danger);background: transparent;}
.btx-back:hover svg{stroke: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;margin-bottom:2rem;align-items:center}
.page-title h2{margin: 0;}
.page-action{display:flex;align-items:center;grid-gap:1rem}
.page-action .btx{padding: 10px 2rem;}

.flex-wrap{display:flex;grid-gap:10px;align-items:start}.flex-wrap .formgroup{margin:0;width:100%}
.form-group{margin-bottom:1rem;display:flex;flex-direction:column;grid-gap:10px;width:100%}
.form-group input, .form-group textarea{font-size: 14px;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}
.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;padding:1.2rem;font-size:18px}
.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}



.badge{padding:10px 1rem;border-radius:100px;font-size:13px}
.color-orange{background:#FFBD00}
.color-success{background:var(--color-success);color:#fff}
.color-info{background:var(--color-info);color:#fff}
.color-warning{background:#111;color:#fff}
.color-danger{background:var(--color-danger);color:#fff}
.color-primary{background:var(--color-main);color:#fff}
.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){
    .mobshow{display: none;}
    .split{display:flex;grid-gap:1rem}
.split .form-group{width:100%}
.close-menu{display: none;}
}
@media (max-width:768px){
    .container{padding: 0 15px;}
    .mobshow{display: block;}
    .form-big{flex-direction:column}
.mainwrap{width:100%}
.item-data{padding:1.5rem 1rem}
.item-data-in{grid-template-columns:repeat(1,1fr)}
.sidewrap{width:100%}.sidewrap button{order:4}
    .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;}
    .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;width: 100vw;}
    .logonav img {width: 100%;}
    .logonav{display:flex;align-items:center;justify-content:space-between}
    .logonav a{width:27%}.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%}
}