@import url(https://fonts.googleapis.com/icon?family=Material+Icons);


    @font-face {
    font-family: 'Volte';
    font-style: normal;
    font-weight: 400;
    src: local('Volte'), url('../fonts/Volte.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Volte';
    font-style: normal;
    font-weight: 300;
    src: local('Volte'), url('../fonts/Volte Light.woff') format('woff');
    }

    @font-face {
    font-family: 'Volte';
    font-style: normal;
    font-weight: 500;
    src: local('Volte'), url('../fonts/Volte Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Volte';
    font-style: normal;
    font-weight: 600;
    src: local('Volte'), url('../fonts/Volte Semibold.woff') format('woff');
    }
    


    @font-face {
    font-family: 'Volte';
    font-style: normal;
    font-weight: 700;
    src: local('Volte'), url('../fonts/Volte Bold.woff') format('woff');
    }
  
    .material-icons-outlined {
        font-family: 'Material Icons Outlined';
        font-weight: normal;
        font-style: normal;
        font-size: 30px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
      }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    font-family: 'volte';
}



*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'volte';  
}



/* ----------------login-form-section----------------------- */

input:focus, textarea:focus {
 outline-color: #1273eb;
}
.form_row2{ display: inline-block; width: 100%; margin-bottom: 0px; }


.login-banner{
    width: 100%;
    height: 100vh;
    background-image: url(../images/dd-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.login-box {
    max-width: 400px;
    padding: 12px 15px 25px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
}

.logo-box2 {
        max-width: 160px;
        margin: auto;
        margin-bottom: 20px;
        margin-top: 10px;
 }


.logo-box2 img{
    width: 100%;
    object-fit: contain;
}

.login-box form {
    width: 100%;
    padding: 30px 15px;
}
.error{
    color: red;
    padding-bottom: 10px;
}

.login-box form [type="text"]{
    width: 100%;
    padding: 15px 10px;   
    margin-bottom: 20px;
    border:1px solid #bec3cc;
     font-size: 16px;
    border-radius: 2px;
    outline: none;
}

.login-box form [type="password"]{
    width: 100%;
    padding: 15px 10px;   
    margin-bottom: 20px;
    border:1px solid #bec3cc;
    border-radius: 2px;
    font-size: 16px;
    outline: none;
}

.form_row2 input[type="submit"]{
    width: 100%;
    padding: 14px 20px;
    background-color: #0e90ff;
    cursor: pointer;
    border: none;   
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    margin-bottom: 15px;
    cursor: pointer;
    text-transform: uppercase;
}

.form_row2 input[type="submit"]:hover{
    opacity: 80%;
    transition: 0.3s;
}

.login-box label{
    display: block;
    font-size: 14px;
}

.login-box label [ type="checkbox"]{
    margin-right: 5px;
}

.login-box ::-webkit-input-placeholder { 
    color: #83879a;
    font-weight: 400;
}

.login-box   ::-moz-placeholder{
    color: #83879a;
    font-weight: 400;
}

.leaf-let{
    width: 100%;
}

.leaf-let header{
    width: 100%;
    background-color: #fff;
    box-shadow:none;
    top: 0;
    left: 0;
    position: sticky;
    border-bottom: 2px solid #ececec8a;
    z-index: 100;
}

.leaf-let header .logo-wrapper {
    width: 180px;
    margin-left: 40px;
    padding: 11px 0px;
}

.leaf-let header .logo-wrapper img{
    width: 100%;
}

.leaf-let .l-wrapper{
   width: 100%;
   height: 88vh;
}

.l-wrapper .l-content{
    width: 100%;
    display: flex;
}

.l-side-list{
    flex-basis: 15%;
    padding: 18px 0px;
    height: 100%;
    padding: 18px 0px;
    height: 88vh;
    border-right: 1px solid #e0e4e7c7;
}

.l-main-box{
    flex-basis: 85%;
}

.l-side-list ul li{
    list-style: none;
    padding: 13px 20px;
    width: 100%;
    margin-bottom: 20px;
}

.l-side-list ul{
padding: 15px 25px 0px 0px;
position: sticky;
top: 95px;
left: 0;
}


.l-side-list ul li a{
    text-decoration: none;
    color: #101010;
    font-family: 'volte';
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.l-side-list ul .active{
    background-color: #6824a9;
    border-radius: 0px 25px 25px 0px;
}

.l-side-list ul .active a{
    color: #fff;
}

.l-side-list ul li a i{
    margin-right: 10px!important;
    font-size: 22px;
}


.l-main-box .l-main-warp{
    width: 100%;
    padding: 10px;
    position: relative;
    height: 88vh;
}

.l-main-warp .leaft-let-box{
    width: 100%;
    max-width: 1000px;
    display: block;
    margin: 100px auto; 
}
.l-uploader{ float: left; width: 33.33%; padding: 30px; }


.leaft-let-box .l-uploader .l-circlebox{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #f2f6ff;
}

.leaft-let-box .l-uploader .l-roundbox i{
font-size: 60px;
color: #636f82;
}
.leaft-let-box .l-uploader .l-roundbox1 i{
font-size: 60px;
color: #636f82;
}

.leaft-let-box .l-uploader .l-roundbox:hover i{
    transform: scale(1.1);
    transition: 0.5s;
    color: #0e90ff;
}
.leaft-let-box .l-uploader .l-roundbox1:hover i{
    transform: scale(1.1);
    transition: 0.5s;
    color: #0e90ff;
}


.leaft-let-box .l-uploader .l-roundbox{
    width: 200px;
    height: 200px;;
    border:3px solid #e7ebf5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto 15px;
    cursor: pointer;
}
.leaft-let-box .l-uploader .l-roundbox1{
    width: 200px;
    height: 200px;;
    border:3px solid #e7ebf5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto 15px;
    cursor: pointer;
}


.leaft-let-box .l-uploader .l-roundbox1:hover {
background-color: #fff;
border: 3px solid #0e90ff;

}

.leaft-let-box .l-uploader .l-roundbox:hover {
background-color: #fff;
border: 3px solid #0e90ff;

}


.l-main-box .l-main-warp .leaft-let-box .l-uploader p{
    color: #191919cc !important;
    font-family: 'volte';
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    text-transform: uppercase;
}

.l-popup-overlay{
    width: 100%;   
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left:0;
    bottom: 0px;
    right: 0px;
    z-index: 1000000;
    display: none;
}
 
.l-popup-box{
    position: fixed;
    width: 100%;
    max-width: 950px;
    border-radius: 10px;
    background-color: #fff;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.l-popup-box .l-popup-wraper{
       border: 2px solid #e8e8e8;
       display: flex;
}

.l-popup-box .l-popup-wraper .drag-box{
 flex-basis: 40%;
 padding: 60px 40px;
 border-right: 2px solid #e8e8e8;
}

.l-popup-box .l-popup-wraper .drag-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}
.l-popup-box .l-popup-wraper .drag-main i {
    font-size: 40px;
    color: #0084ff;
}
.l-popup-box .l-popup-wraper .drag-main img{
    width: 30px;
    height: 30px;
    margin-bottom: 0px;
    object-fit: contain;
}

.l-popup-box .l-popup-wraper .drag-main label  .w-up{
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 10px;
}

.l-popup-box .l-popup-wraper .drag-main p {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin: 70px auto 20px;
    color: #2a3138;
}

/*.l-popup-box .l-popup-wraper .drag-main [type="file"]{
    display: none;
}*/

.l-popup-box .l-popup-wraper .drag-main .l-btn{
    margin-top: 10px;
    background-color: #0084ff;
    padding: 6px 8px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.l-popup-box .l-popup-wraper .drag-main .l-btn i{
 font-size: 28px;
 margin-right: 5px;
}

.l-popup-box .l-popup-wraper .drag-main .l-btn:hover{
    opacity: 80%;
}

.pop-up-form{
    flex-basis: 60%;
    padding: 20px 30px ;
}

.pop-up-form .form-row{
    width: 100%;
}

.pop-up-form .form-row label{
     display: block;
}

.pop-up-form .form-row [type="text"], select {
    border: 1px solid #b3b7bd;
    border-radius: 2px;
    box-sizing: border-box;
    color: #191919;
    display: block;
    font-weight: 500;
    font-size: 15px;
    height: 44px;
    padding: 0 10px;
    width: 100%;
    margin: 3px auto 20px;
    
}

.pop-up-form .form-row .title-label{
    font-size: 16px;
    line-height: 1.3;
    display: block;
    font-weight: 500;
    width: 100%;
    color: #191919;
}

.pop-up-form .form-row .title-label span{
    color: #ff0a0a  !important;
    font-size: 23px;    
    margin-left: 0px;
    font-weight: 400;
}

.pop-up-form .form-row textarea{
  width: 100%;
  border: 1px solid #b3b7bd;
  border-radius: 2px;  
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  margin-top: 3px;

}



.pop-cat{
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

.pop-cat ul{
     display: flex;
     justify-content: space-between ;
     list-style: none;
}

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

.pop-cat ul li div{
    list-style: none;
    margin-bottom: 10px;
}

.pop-cat ul li div [ type="checkbox"]{
    margin-right: 5px;
}

.pop-cat ul li div a{
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    font-family: "volte";
    color: dimgray;
}

.pop-cat ul li div a:hover{
    color:#0057ff ;
}

.pop-cat ul li div label{
    color:#101010;
    font-size: 10px;
    font-family: 'volte';

}

.d-flex{
    display: flex;
}

.al-cntr{
    align-items: center;
}

.p-down{
    width: 100%;
}

.l-popup-box .pop-foot{
    float: right;
    padding-top: 20px;
}

.l-popup-box .cnlbt{
    background-color: #373d46;
    color: #ebebec;
    border: none;
    outline: none;   
    padding: 15px 45px;
    border-radius: 4px;
    font-family: 'volte';
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
}

.l-popup-box .cnlbt:hover{
opacity: 80%;
}

.l-popup-box .updbt{
        background-color: #0057ff;
    color: #ebebec;
    border: none;
    outline: none;
    padding: 14px 45px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
    font-family: 'volte';
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
}

.l-popup-box .updbt img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    object-fit: contain;
    margin-right: 5px;
}

.l-popup-box .updbt:hover{
opacity: 80%;
}


.p-down .title-label{
    color: #101010;
    font-size: 14px;

}

.p-down .title-label span{
    color: #191919 ;
    font-size: 12px;
    font-weight: normal;
}

.dive-top-cat{
    display: flex;
    /* justify-content: flex-end; */
    justify-content: center;
    overflow: hidden;
    margin: 30px 0px 45px;
    padding: 0px 30px;
    width: 100%;
    overflow: hidden;
}

.dive-top-cat a{
 padding: 14px 50px;
 color: #101010;
 margin-right: -2.1px;
 font-weight: 500;
 background-color: #fff;
 border-radius: 4px;
 border: 1px solid #e0e4e7;
 font-size: 16px;
 text-transform: uppercase;
 letter-spacing: 0.80px;
 cursor: pointer;
 text-decoration: none;
}
.dive-top-cat a:first-child{ border-radius: 4px 0px 0px 4px; }
.dive-top-cat a:nth-child(2){ border-radius: 0px; }
.dive-top-cat a:last-child{ border-radius: 0px 4px 4px 0px; }

.dive-top-cat .active{
    background-color: #0a66ff !important;
    color: #fff;
}

.dive-top-cat .active:hover{
    opacity: 80%;
}

.l-main-box .drive-content{
    width: 100%;
}

.l-main-box .drive-wrap-content{
    width: 100%;
    padding: 0px 30px;
    display: inline-block;
}

.drive-box{
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.drive-box .dive-items{
    flex-basis: 14.28%;
    margin-bottom: 20px;
    max-width: 14.28%;
    padding: 15px;
}

.drive-box .dive-items a{
    width: 100%;
    height: 100%;
}

.drive-box .dive-items .d-box{
 width: 100%;
 position: relative;
 overflow: hidden;
 border-radius: 5px;
 padding-top: 100%;
}

.d-box .overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.596);
    display: none;
}

.d-box:hover .overlay{
    display: block;

}

.drive-box .dive-items .d-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.drive-box .dive-items .d-box video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
}

.drive-box .dive-items .d-box:hover img{
    transform: scale(1.2);
    transition: 0.5s;
}

.dive-items .subtitle{
    text-align: left;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 500;
    color: #101010;
    font-family: "volte";
}

.drive-box .dive-items .d-box .d-title {
    position: absolute;
    font-family: 'volte';
    top: 0px;
    left: 0px;
    display: none;
    width: 100%;
    padding: 0px 10px;
    background-color: rgba(0, 0, 0, 0.596);
    bottom: 0px;
    right: 0px;
}

.drive-box .dive-items .d-box:hover .d-title{
    display: block;

}

.drive-box .dive-items .d-box .d-title p{
    color: #fff;
    text-align: center;
    z-index: 22;
    font-size: 16px;
    font-weight: 500px;
    font-family: 'volte';
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.d-box .close-icn{
    color: #ff4343;
    position: absolute;
    top: 9px;
    right: 6px;
    z-index: 555;
    display: none;
    cursor: pointer;
}

.drive-box .dive-items .d-box:hover .close-icn{
    display: block;
    font-size: 30px;
}

/* uupload*/
.box {
     display: block;
     min-width: 300px;
     height: 335px;
     margin: 10px;
     background-color: white;
     border-radius: 2px;
     /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     overflow: hidden;
}
 .upload-options {
     position: relative;
     height: 100px;
     border:2px dashed #abcaff;
     cursor: pointer;
     overflow: hidden;
     text-align: center;
     transition: background-color ease-in-out 150ms;
     border-radius: 4px;
}
 .upload-options:hover {
     border:2px dashed #3f86ff;
}
 .upload-options input {
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}
 .upload-options label {
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     font-weight: 400;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
     overflow: hidden;
}
 .upload-options label::after {
     content: 'collections';
     font-family: 'Material Icons';
     position: absolute;
     font-size: 2.5rem;
     color: #3f86ff ;
     top: calc(50% - 1.9rem);
     left: calc(50% - 1.25rem);
     z-index: 0;
}
 .upload-options label span {
     display: inline-block;
     width: 50%;
     height: 100%;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     vertical-align: middle;
     text-align: center;
}
.upload-options em{    align-content: center;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px 0;
    position: absolute;
    bottom: 0px;
    color: rgb(196 195 196);
    text-transform: uppercase;
    font-size: 15px;
}
 .upload-options label span:hover i.material-icons {
     color: lightgray;
}
 .js--image-preview {
     height: 225px;
     width: 100%;
     position: relative;
     overflow: hidden;
     background-image: url('');
     background-color: #f5f5f7;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;     
     border-radius: 2px;
     margin: 0 0 10px 0;
}
 .js--image-preview::after {
     content: "photo_size_select_actual";
     font-family: 'Material Icons';
     position: relative;
     font-size: 4.5em;
     color: rgba(230, 230, 230, 1);
     top: calc(50% - 3rem);
     left: calc(50% - 2.25rem);
     z-index: 0;
}
 .js--image-preview.js--no-default::after {
     display: none;
}
 .js--image-preview:nth-child(2) {
    /* background-image: url('http://bastianandre.at/giphy.gif'); */
}
 i.material-icons {
     transition: color 100ms ease-in-out;
     font-size: 2.25em;
     line-height: 55px;
     color: white;
     display: block;
}
 .drop {
     display: block;
     position: absolute;
     background: rgba(95, 158, 160, 0.2);
     border-radius: 100%;
     transform: scale(0);
}
 .animate {
     animation: ripple 0.4s linear;
}
 @keyframes ripple {
     100% {
         opacity: 0;
         transform: scale(2.5);
    }
}

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

@media(min-width:1201px) and (max-width:1366px){
.drive-box .dive-items{   max-width: 16.66%; flex-basis: 16.66%; padding: 10px; }
.l-side-list{ flex-basis: 20%; }
.l-main-box { flex-basis: 80%;}
.drive-box{ margin: 0 -10px; }
}

@media(min-width:1023px) and (max-width:1200px){
.drive-box .dive-items{   max-width: 20%; flex-basis: 20%; padding: 10px; }
.l-side-list{ flex-basis: 20%; }
.l-main-box { flex-basis: 80%;}
.drive-box{ margin: 0 -10px; }
}
/* media-quaries-here */
@media(max-width:1023px){
    .leaf-let header .logo-wrapper {
        width: 140px !important;
        text-align: center;
    display: block;
    margin: auto;
    }
    .l-side-list ul li a{ justify-content: center; }
    .drive-box{ margin: 0 -10px; }
    .l-popup-box .l-popup-wraper{
        flex-direction: column;
    }

    .l-popup-box {
        width: 80%;

    }

    .l-popup-box .l-popup-wraper .drag-box {
        border-right:none;
    }

    h1.title-label {
        font-size: 14px;
    }


    .l-side-list ul li a {
        font-size: 14px;
    }

   .drive-box .dive-items {
        flex-basis: 25%;
        max-width: 25%;
        padding: 10px;
    }

    .dive-top-cat a {
        padding: 10px 40px;
    }

    .l-side-list {
        border-right: none !important;
        padding: 0px;
        flex-basis: 100%;
    }
   .l-wrapper .l-content {
    flex-direction: column;
}
.l-side-list ul li {
    width: 50%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.l-side-list ul {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px;
}
.l-side-list ul .active {
    background-color: #6824a9;
    border-radius: 0px;
}
    .l-main-box {
    flex-basis:100%;
    padding: 0px 15px;
    overflow: hidden;
}
    .l-main-warp .leaft-let-box {
        width: 100%;
        margin: 50px auto;
    }

    .dive-items .subtitle {
        font-size: 16px;
    }

    .dive-top-cat {
        padding: 0px 4px;
    }

    .l-main-box .drive-wrap-content {
        padding: 0px;
    }
}
/* -------------------------------------- */
@media(max-width:768px){

   .drive-box .dive-items .d-box .d-title p {
        font-size: 12px !important;
    }

    

    .l-popup-box .l-popup-wraper .drag-main p {
        margin: 30px auto 20px;
    }

    .l-popup-box .l-popup-wraper .drag-box {
        border-right:none;
        padding: 15px 5%;

    }

    .l-popup-box .pop-foot {
        padding-top: 10px;
    }

    .l-popup-box .updbt {
        padding: 11px 20px;
    }

.box{ height: 300px; } .js--image-preview{ height: 200px; } .upload-options{ height: 90px; }
.box video{ height: 200px; }
   
    .pop-up-form .form-row textarea {
        margin: 8px auto 12px;
    }

    .l-popup-box .cnlbt {
        padding: 12px 20px;
        margin-bottom: 5px;
    }
    
    .l-wrapper .l-content {
        flex-direction: column;
    }

    .l-main-box {
        flex-basis: 100%;
    }

    .l-side-list {
        flex-basis: 100%;
    }

    .l-main-box .l-main-warp {
        height: 55vh !important;
        padding: 0px;
    }


    .leaft-let-box .l-uploader .l-roundbox {
        width: 100%;
        height: 160px;
    }
    .leaft-let-box .l-uploader .l-roundbox1 {
        width: 100%;
        height: 160px;
    }
    .l-main-warp .leaft-let-box{     margin: 30px auto; }
.l-uploader{ padding: 10px; }
    .leaft-let-box .l-uploader .l-roundbox i{
       font-size: 50px;
    }
    .leaft-let-box .l-uploader .l-roundbox1 i{
       font-size: 50px;
    }

    .l-main-box .l-main-warp .leaft-let-box .l-uploader p {
        font-size: 15px;
    }

    /* mydrives */

 .drive-box .dive-items{
        flex-basis: 33.33% ;
        margin-bottom: 20px;
        max-width: 33.33%;
        padding: 10px;
    }
    
    .l-side-list ul {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0px;
    }

    .l-side-list ul li {
        width: 50%;
      border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    }
    .l-side-list ul .active {
    background-color: #6824a9;
    border-radius: 0px;
}

    .dive-top-cat a {
       
        text-align: center;
        padding: 10px 40px;
    }

   
    .l-side-list ul li a {
        padding: 3px;
    }

    .dive-top-cat {
        margin: 15px 0px 20px;
    }

    .l-main-box {
        flex-basis: 100%;
        padding: 0px 15px;
        overflow: hidden;
    }

 
}
/* ---------------------------------------------------------------------------------------- */

@media(max-width:540px){
    /* login-box */
    .login-box form {
        width: 100%;
        padding: 10px 5px;
    }

    .login-box {
        padding: 12px 10px 25px;
    }

    .login-box form button {
        padding: 10px 8px;
    }

    

    .l-popup-box .l-popup-wraper .drag-main p {
        margin: 14px auto 12px;
    }

    .l-popup-box .l-popup-wraper .drag-main img {
        width: 22px;
        height: 22px;
    }

    

    .pop-up-form {
        padding: 20px 25px;
    }

    .l-popup-box .l-popup-wraper .drag-main p{
        font-size: 12px;
        margin: 18px auto 12px;
    }

    .l-popup-box {
        padding: 10px;
    }

    .pop-up-form {
        padding: 15px 20px;
    }

    .pop-up-form .form-row textarea {
        outline: none;
    }

    .leaf-let .l-wrapper {
        height: 0vh !important;
    }

    .l-content .l-side-list {
        border-right: none!important;
    }

    .l-main-warp .leaft-let-box {
        padding: 28px 10px;
        width: 100%;
    }

    .l-wrapper .l-content {
        flex-direction: column;
    }

    .l-side-list {
        padding: 0px;
    }
   


    .l-main-warp .leaft-let-box {
        padding: 28px 10px;
    }

.l-uploader { width: 50%; margin-bottom: 10px; }
    .leaft-let-box .l-uploader .l-roundbox {
        width: 100%;
        height: 150px;
    }
     .leaft-let-box .l-uploader .l-roundbox1 {
        width: 100%;
        height: 150px;
    }

    .leaft-let-box .l-uploader .l-roundbox i {
     font-size: 45px;
    }
    .leaft-let-box .l-uploader .l-roundbox1 i {
     font-size: 45px;
    }

    /* mydrives */
    .dive-items .subtitle {
        font-size: 16px;
    }

.drive-box .dive-items{
        flex-basis: 33.33% ;
        margin-bottom: 20px;
        max-width: 33.33%;
        padding: 5px;
    }
    .drive-box {
    margin: 0 -5px;
}

    .l-main-box {
        flex-basis: 100%;
        padding: 0px 10px;
        overflow: hidden;
    }
   
}

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

@media(max-width:414px){

    /* login-box */
    .login-box {
        max-width: 350px;
        width: 300px;
    }
    
    .l-side-list {
        border-right: none;
        width: 100%;  
    }

    .l-side-list ul {
        padding: 0px;
    }

    .l-main-box {
      width: 100%;
    }

    .l-main-warp .leaft-let-box {
        width: 100%;
        padding: 0px;

    }

    .l-side-list ul li a {
        justify-content: center;
    }

    .l-popup-box .l-popup-wraper .drag-box {
        padding: 15px 22px !important;
        border: 0px;
    }
    .js--image-preview{ height: 175px; }

    .l-popup-box {
        height: 600px;
        overflow: scroll;
        width: 90%;
    }
    .box{ max-width: 300px; width: 100%; min-width: inherit; height: 270px; }

    .box video{ height: 175px; }

    .pop-cat ul {
        flex-direction: column;
    }

    .l-popup-box .updbt {
        padding: 11px 20px !important;
    }

    .l-popup-box .cnlbt {
        padding: 12px 20px;
        margin-bottom: 5px;
    }

    .l-main-box .l-main-warp {
        width: 100%;
        padding: 0px;
        position: relative;
        
    }
    .pop-up-form .form-row [type="text"]{ margin: 3px auto 12px; }

    .l-side-list ul li a {
        font-size: 14px;
    }

    .leaft-let-box .l-uploader .l-roundbox {
        width: 100%;
    height: 130px;
    }
    .leaft-let-box .l-uploader .l-roundbox1 {
        width: 100%;
    height: 130px;
    }

    .upload-options{ height: 85px; }

    .leaft-let-box .l-uploader .l-roundbox i{
        font-size: 38px !important;
    }
    leaft-let-box .l-uploader .l-roundbox1 i{
        font-size: 38px !important;
    }
   
    .drive-box .dive-items {
        flex-basis: 50% ;
        max-width: 50%;
    }

    .l-side-list ul li a {
        padding: 1px;
    }

    .dive-top-cat a {
        padding: 10px 25px;
    }

    .dive-top-cat {
        padding: 0px 4px;
    }
}
/* ---------------------------------- */
@media(max-width:320px){

    .l-popup-box {
        height: 500px !important;
        width: 90% !important;
    }

    .l-popup-box .updbt {
        margin-left: 0px;
    }

    .leaft-let-box .l-uploader .l-roundbox {
           width: 100%;
    height: 130px;
        margin: 3px;
    }
    .leaft-let-box .l-uploader .l-roundbox1 {
           width: 100%;
    height: 130px;
        margin: 3px;
    }

    .leaft-let-box .l-uploader .l-roundbox i{
        font-size: 30px !important;
    }
    .leaft-let-box .l-uploader .l-roundbox1 i{
        font-size: 30px !important;
    }


.bg-white{
    color: #ffff!important;
}

.drive-box .dive-items{
    flex-basis: 50% !important;
    margin-bottom: 20px;
    max-width: 50% !important;
    padding: 5px;
}

.dive-top-cat a {
    padding: 10px 15px;
}



}



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

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