@import url('//cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css');

    @import url('//fonts.googleapis.com/css2?family=Azeret+Mono&family=Lilita+One&family=Montserrat&family=Oswald:wght@700&family=Poppins&family=Ubuntu+Mono&display=swap');

    @import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css');
    
    @import url('//fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
    
    @import url('//fonts.googleapis.com/icon?family=Material+Icons');
    
    @import url('//fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+Tangsa:wght@400;500;600;700&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&family=Pontano+Sans&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,900&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
    
    :root {
        --light-blue : #f8faff;
        --blue : #1967d2;
        --blue2: #5692e4;
        --light-violet: #98a3b7ab;
        --gray : #e4e4e4;
        --faded : #3C4048;
        --hover-bg : #fbfbfb;
        --label: #5f6368;
        --text : #202124;
    }
    
    .material-symbols-outlined
    {
        vertical-align:middle;
        /*font-weight:500;*/
        /*color:#3c4043;*/
        /*font-size:28px !important;*/
    }
    

 
    .material-symbols-outlined {
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' -25,
      'opsz' 48
    }


    
    .material-icons{
        vertical-align:middle;
        font-weight:400;
        color: #000000a3;
        font-size:26px;
    }
    
    .material-symbols-outlined.small{
        font-size:22px !important;
    }
    
    .material-icons.small{
         font-size:18px !important;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x:hidden;
        overflow-y:auto;
        font-family: 'Montserrat','Noto Sans';
        font-size: 16px;
        color:#5f6368;
        font-weight: 400;
        letter-spacing: 0.9px;
        line-height: 31px;
        /*-webkit-hyphens: auto;*/
        /*-ms-hyphens: auto;*/
        /*hyphens: auto;*/
        word-break: break-word;
        word-wrap: break-word;
        color: rgb(60,64,67);
        user-select: none;
    }
    
    #page{
        margin:auto;
        width: calc(100% - 280px);
    }
    
    #page.guest{
        width:100%;
        padding:10% 5px;
    }
    
    #pg-box{
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    
    #page.guest #pg-box{
        width:100%;
    }
    
    #page.logged #pg-box{
        max-width:800px;
        margin:20px auto;
    }
    
    #page.guest .card {
        display:block;
        max-width:450px !important;
    }
    
    #sidebar,
    #page-ph{
        width:280px;
    }
    
    #sidebar ul {
        list-style:none;
        width:100%;
        padding:0;
        margin:0;
    }
    
    #sidebar li {
        font-weight:600;
        padding:10px 30px;
        cursor:pointer;
        color: var(--faded);
        font-size: 0.91rem;
    }
    
    #sidebar li.active{
        background:rgb(231 240 255);
        border-top-right-radius:30px;
        border-bottom-right-radius:30px;
        color: var(--blue);
    }
    
    #sidebar li > span,
    #sidebar li > i {
        margin-right:15px;      
        vertical-align:middle;
    }
    
    #search{
        border:1px solid #e4e4e49a;
        background: #f0f3f5;
        display:flex;
        min-width:200px;
        width:clamp(260px,40%,440px);
        max-width:600px;
        border-radius:10px;
        height:45px;
        margin:10px;
    }
    
    #search.shadow {
        background:transparent;
    }
    
    #search > span,
    #search > input
    {
        border:none;
        background:transparent;
        height:100%;
    }
    
    #search > input{
        width: clamp(220px, 100%,400px);
        border-color: transparent;
        border-style: solid;
        border-width: 0 1px;
        outline: none;
        padding:5px;
        font-size:16px;
        letter-spacing:1px;
        word-spacing:2px;
    }
    
    #search > span{
        padding:10px;
        margin:2px;
        width:40px;
        height:39px;
    }
    
    #search > span:hover{
        border-radius:50%;
        background:#e4e4e4;
    }
    
    #search-result-scroll{
        max-height:40vh;
        overflow-x:hidden;
        overflow-y:auto;
        width:clamp(260px, 100%,440px);
        position:absolute;
        top:56px;
        background:#fff;
        padding:0;
        margin:0;
        border:1px solid #eee;
        display:none;
    }
    
    #search-result-scroll:has(li){
        display:block;
    }
    
    #search-results{
        width:100%;
        box-shadow:0 0 2px #ccc;
        list-style:none;
        padding:0;
        margin:0;
        font-family:Montserrat, "Noto Sans";
    }
    
    
    #search-results li{
       padding:8px 15px;
       margin:0;
    }
    
    #search-results li:hover{
        background:#d9dbdd;
    }
    
    #search-results li:not(:last-child){
        border-bottom: 1px inset #d3d3d34f;
    }
    
    #search-results h6{
        font-weight:500;
        padding: 0;   
        font-size:12pt;
    } 
    
    #search-results li > p{
        padding:0;
        margin:0;
        font-size:10pt;
    }
    
    #search-results *[data-url]{
        cursor:pointer;
    }
    
    .card {
        background-color: #fff;
        border-radius: 8px;
        border: 1px solid #dadce0;
        -moz-box-shadow:0 1px 1px 0 #e0e7f2;
        -webkit-box-shadow:0 1px 1px 0 #e0e7f2;
        box-shadow:0 1px 1px 0 #e0e7f2;
        overflow:hidden;
    }
    
    .card-body{
        padding:0;
    }
    
    .card > [card-bg]{
        background-position:right;
        background-size:contain;
        background-repeat: no-repeat;
        background-origin:content-box;
        width: 316px;
        height: 112px;
    }
    
    .card-body > div,
    .card-body > a,
    .card-body > h1,
    .card-body > h2,
    .card-body > h3,
    .card-body > h4,
    .card-body > h5,
    .card-body > h6,
    .card-body > p
    {
        padding-left: 1.5rem!important;
        padding-right: 1.5rem!important;
    }
    
    .card-footer a {
        color: var(--blue2);
        font-weight:600;
    }
    
    .project  .desc{
        height:60px;
        max-height:100px;
        overflow-x:hidden;
        overflow-y:auto;
    }
    
    .project a.d-flex > div {
        width:clamp(60px,10%,80px);
    }
    
    .project a.d-flex > p{
        width:100%;
    }
    
    hr{
        margin:5px 0;
    }
    
    #top-bar{
        height:60px !important;
    }
    
    #top-bar .dropdown{
        width: 330px;
        left: calc(100% - 340px);
        top: -55px;
    }
    
    .dropdown-menu{
        width: 100%;
        margin-top:35px;
    }
    
    a, a:hover{
        color: #5f5f5f;
        text-decoration:none;
        font-weight:500;
        vertical-align:middle;
    }
    
    a.blue {
        color : var(--blue);
    }
    
    textarea{
        resize:vertical;
        height:200px !important;
    }
    
    input:not(.otp-inp),
    input:not(.otp-inp):focus,
    textarea,
    textarea:focus{
        border:none;
        outline:none !important;
    }
    
    p {
        color:#5f6368;
        font-size: 0.975rem;
        line-height:1.5rem;
    }
    
    .switchery{
        margin:5px 0 0 0;
    }
    
    .icon-input
    {
        display:flex;
        border:1px solid #e4e4e4;
        border-radius:5px;
        overflow:hidden;
        margin:25px auto;
    }
    
    .icon-input > label {
        display:none;
        position: absolute;
        left: 70px;
        margin-top: -17px;
        background: #fff;
        padding: 0 4px;
        color: #333;
        font-weight:300;
        letter-spacing: 1px;
        word-spacing: 2px;
        font-size: 13px;
        transition: all 3s;
    }
    
    .icon-input.active > label{
        display:block;
    }
    
    .icon-input.no-icon > label{
        left: 50px;
    }
    
    .icon-input> i
    {
        width: 25px;
        height:50px;
        vertical-align:middle;
        padding:18px 15px;
    }
    
    .icon-input > span
    {
        width: 40px;
        height: 50px;
        vertical-align: middle;
        padding: 13px 9px;
    }
    
    .icon-input input,
    .icon-input textarea
    {
        width: calc(100% - 25px);
        color:#202124bb;
    }
    
    .icon-input.no-icon input,
    .icon-input.no-icon textarea
    {
        width: 100%;
    }
    
    .icon-input input
    {
        height:50px;  
        padding:0 35px;
    }
    
    .icon-input small
    {
        display:block;
        height:50px;  
        padding:10px 35px;
        font-size: 14px;
        cursor:text;
    }
    
    .icon-input textarea{
        height:100px !important;
        resize:none;
        padding:35px;
    }
    
    .icon-input> i + input,
    .icon-input> span + input,
    .icon-input> i + textarea,
    .icon-input> span + textarea
    .icon-input> i + small,
    .icon-input> span + small
    {
        padding:0 10px !important;
    }
    
    .icon-input.no-icon i,
    .icon-input.no-icon span{
        display:none;
    }
    
    .input-wrap{
        display:flex;
        padding: 8px 0 0 0;
    }
    
    
    .input-wrap > label:not(.image-browser){
        color: var(--label);
        min-width: 15vw;
        max-width: 15vw;
        display:block;
    }
    
    .input-wrap.expand > label{
        min-width: 25vw;
        max-width: 25vw;
    }
    
    .input-wrap > p{
        width:100%;
        color: var(--text);
    }
    
    .input-wrap > span{
        float:right;
        width:25px;
        color: var(--label);
        cursor:pointer;
    }
    
    .input-wrap.inactive,
    .input-wrap + .icon-input:not(.active){
        display:none;
    }
    
    .inp-rev{
        cursor:pointer;
    }
    
    .field{
        padding:10px 0;
        border-bottom:1px solid var(--gray);
    }
    
    .input-wrap > label.image-browser
    {
        max-height:60px;
        max-width:60px;
        min-width:60px;
        min-height: 60px;
        margin-top:-25px;
    }
    
    
    .input-wrap > input,
    .input-wrap > textarea
    {
        width:100%;
        color: var(--text);
        max-height: 33px;
    }
    
    button {
        color:#fff;
        background-color : var(--blue2);
        border:1px solid #f3f3f3;
        border-radius:5px;
        padding:8px;
        min-width:100px;
    }
    
    button.light{
        background: var(--light-blue);
    }
    
    .fa{
        color : var(--light-violet);
    }
    
    
    .form-label {
       font-size:16px;
       margin:20px 0;
       color:#3c4048;
    }
    
    input:-internal-autofill-selected {
        background:#fff !important;
    }
    
    .image-browser{
        border-radius:50%;
        border:1px solid #e4e4e4;
        width: 80px;
        height:80px;
        overflow:hidden;
        vertical-align:middle;
        cursor:pointer;
    }
    
    .image-browser.has-file{
        border:2px solid var(--blue);
    }
    
    .image-browser:hover{
        background: #f3f3f3;
    }
    
    .image-browser img{
        width:100%;
        min-height:100%;
    }
    
    .image-browser input{
        display:none;
    }
    
    .image-browser:hover > span{
        display:none;
        position: relative;
        top: -31px;
        width: 80px;
        height: 40px;
        background: #00000080;
        color:#fff;
        margin:auto;
        text-align: center;
    }
    
    .image-browser:hover > span{
        display: block;
    }
    
    .input-wrap > label.image-browser > span{
        width: 60px;
        height: 30px;
    }
    
    logo{
        display:inline-block;
        width:  70px;
        height: 70px;
        overflow:hidden;
        border-radius:50%;
        border:1px solid #eee;
        vertical-align:middle;
        margin:0 8px 0 -10px;
    }
    
    logo > img {
        max-height:100px;
        max-width:100px;
        min-width:70px;
        min-height:70px;
        display:block;
        margin: auto;
    }
    
    section .field:last-child,
    form .field:last-child{
        border-bottom:none;
    }
    
    avatar{
        border-radius:50%;
        display:block;
        border:2px solid var(--blue);
        overflow:hidden;
        vertical-algn:middle;
        height:80px;
        width:80px;
    }
    
    avatar.sm{
        height:40px;
        width:40px;
    }
    
    avatar.md{
        height:60px;
        width:60px;
    }
    
    avatar.lg{
        height:100px;
        width:100px;
    }
    
    avatar.xl{
        height:200px;
        width:300px;
    }
    
    avatar > img{
        max-height:110%;
        max-width:110%;
        min-height:100%;
        min-width:100%;
        display:block;
        margin:auto;
    }
    
    .logo-small,
    .logo.small,
    logo.small{
        height:50px;
        max-height:50px;
        max-width:50px;
        overflow:hidden;
    }
    
      
    .logo-small > img ,
    .logo.small >img,
    logo.small >img {
        max-height:60px;
        max-width:60px;
        min-width:40px;
        min-height:40px;
    }
    
    .callout {
        padding: 15px;
        min-height : 60px;
        height:auto;
        margin: 10px;
        border-left: 0.25rem solid #e9ecef;
        border-radius: 0.25rem;
        font-size:12px;
    }
    
    .callout-box{
        border: 1px solid #e9ecef;
    }
    
    .callout-info {
        border-left-color: #5bc0de;
    }
    
    .callout-warning {
        border-left-color: #f0ad4e;
    }
    
    .callout-danger {
        border-left-color: #d9534f;
    }
    
    .callout-success {
        border-left-color: #28a845;
    }
    
    .callout-primary {
        border-left-color: var(--blue2);
    }
    
    .callout-bg{
        background:#fafafaa8;
    }
    
    #user-project input{
        display:none;
    }
    
    
    span.checked{
        display:none;
    }
    
    label{
        user-select:none;
    }
    
    label.selected > span.checked{
        display:block;
        float:right;
        color:green;
        margin: 17px;
    }
    
    
    .button,
    .paginate_button{
        background:#fff !important;
        border:1px solid #e4e4e4 !important;
    }
    
    .button{
        padding:5px 10px;
        box-shadow: 0 0 1px #ccc !important;
        border-radius:5px;
    }
    
    .keys p {
        cursor:pointer;
    }
    
    .copy-key,
    .ky-update{
        color:var(--faded);
        float:right;
        margin:10px;
        cursor:pointer;
    }
    
    .copy-key:hover,
    .ky-update:hover{
        color:var(--blue);
    }
    
    .hb, .hbg * {
        cursor:pointer;
    }
    
    .hbg:hover{
        background: var(--hover-bg) !important;
    }
    
    .pass-preview{
        display:block;
        color:green;
        position:fixed;
        background: #F0F0F0;
        padding:10px;
        border-radius:10px;
    }
    
    .pass-preview:after{
        content:'';
    	width: 0;
    	height: 0;
    	border-width: 25px 15px 0 15px;
    	border-color: #F0F0F0 transparent transparent transparent;
    	border-style: solid;
    	position:absolute;
    	left:10px;
    	top:calc(100% - 10px);
    }
    
    .pass-preview:empty{
        display:none;
    }
    
    .otp-inp{
        border: 1px outset #0000004b;
        border-collapse: collapse;
        padding: 15px;
        margin: -1px;
    }
    
    .gysc{
        -moz-filter: grayscale(1);
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
    
    center > svg {
        border: 2px solid #000;
    }
    
    .field-msg {
        font-weight: 500;
        font-size: 13px;
        line-height: 30px;
        letter-spacing: .8px;
        word-spacing: 1.5px;
    }
    
    .field-error{
        color: #d60014 !important;
    }
    
    .field-success{
        color: #0e850f !important;
    }
    
    table {
        border-spacing: 0 15px !important;
        clear: both;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        max-width: none !important;
        border-collapse: separate !important;
        border-bottom: none !important;
    }
    
    tbody > tr{
        border:none;
        height:80px;
    }
    
    tbody > tr > td {
        border-top: 1px solid #dee2e8;
        border-bottom: 1px solid #dee2e8;
    }
    
    tbody > tr:hover > td {
        background-color:#6cb5f91a;
        cursor:pointer;
    }
    
    tbody > tr > td:first-child {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        border-left: 1px solid #dee2e8;
        padding-left: 15px;
    }
    
    tbody > tr > td:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        border-right: 1px solid #dee2e8;
        padding-right: 15px;
        width:150px;
    }
    
    th {
        border:none !important;
    }
    
    td .fa {
        font-size:12px;
        color:#000;
    }
    
    td .fa:hover {
        color:#00f;
    }
    
    .table-responsive{
        font-size:14px;
    }
    
    .main-header{
        text-align:center;
    }
    
    .main-header,
    .sub-header{
        margin:20px 0;
        padding:0 !important;
    }
    
    .sub-header > div{
        margin:0 !important;
        padding:0 !important;
    }
    
    .sub-header h5,
    .main-header h5{
        font-size:20px;
        font-weight:600;
        margin:10px 0;
        line-height:30px;
    }
    
    .sub-header h6,
    .main-header h6{
        font-size:15px;
        font-weight:400;
        margin:10px 0;
        line-height:30px;
    }
    
    h5,h6{
        font-weight:400 !important;
    }
    .font-weight-bold{
        font-weight:500 !important;
    }
    .duo-box{
        display:flex;
        padding:0;
    }
    .duo-box > div:not(.card){
        overflow:hidden;
        width:20px;
        padding:0;
    }
    
    .duo-box > div.card
    {
        width:calc(50% - 10px);
        padding: 10px 1.25rem;
    }
    
    .duo-box p{
        font-size:14px;
    }
    
    .duo-box section {
        height:420px;
        overflow:hidden;
        overflow-y:auto;
    }
    
    .duo-box .pgh{
        position: relative;
        bottom: 0;
        height:40px;
        width: 100%;
        padding:0;
        margin:0;
        text-align:center;
    }
    
    .paginate{
        cursor:pointer;
    }
    
    small{
        font-size:12px;
    }
    
    @media (max-width:500px){
        #sidebar {
            width:100%;
            height:80px;
        }
        
        #sidebar > ul {
            position:absolute;
            top:165px;
            z-index:1000;
            background:#fff;
        }
        
        #page {
            width: 100%;
        }
        
        #pg-box{
            width:100%;
            padding:10px;
        }
    }