body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }


/* for All mobile */
@media only screen and (max-width: 767px) { 

    .dv {
        display: none;
    }
    
    .video-container {
        margin-bottom: 20px;
    }

}


/* for all tops */
@media only screen and (min-width: 768px) { 

    .mv {
        display: none;
    }
    
    #app-content
    {
        margin: 0 auto;
        max-width: 900px;
    }

}

/* ==================== header section ========================= */

#modal-header-course {
    height: 60px;
}

#modal-header-course .header-white {
    background: #fff !important;
}

#modal-header-course .header-tbl {
    float: right;
    margin-right: 0px;
}

#modal-header-course .timer-rhs {
    margin-top: -3px;
    background:transparent;
}

#modal-header-course .timer-rhs.user {
    padding-top: 22px;
}

#modal-header-course {
    background: #3d3d3d;
}

#modal-header-course,
#modal-header-home {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#modal-header-course img.drg-logo {
    width: 100px;
}

#modal-header-course i.fas.fa-chevron-left {
    color: #959595
}

/* ==================== typography ========================= */
p {
    font-size: 14px !important;
}

body {
    font-size:14px !important;
}

li,
li span {
    font-size:14px !important;
}

#home-section  h2 {
    font-size: 1.2rem !important;
    margin: 0;
    line-height: 1.4rem;
}

#home-section  h3 {
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin: 0;
}     

#home-section  .my-course-wrapp { 
    padding: 0;
    overflow:hidden;
}
    
#template-button-2, .template-button-2 {
    padding: 7px 16px !important; 
}

input, select, textarea, button, form { 
    font-size: 100% !important; 
}
    


/* ==================== home page ========================= */

#header  img.drg-logo {
    width: 80px;
}

#home-section .my-course-wrapp {
    height: auto;
}

/* =================== App footer ================== */

#app-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #3d3d3d;
  color: white;
  text-align: center;
  padding: 0px 0 0px 0;
  margin-bottom: -1px;

}

#app-footer ul {
    margin-bottom: 0px;
}

#app-footer ul li {
    width: 17%;
    margin: -6px 0 6px 0;
    background: transparent;
    border: 0;
    color: #fff !important;
    padding: 0 12px;
}


#app-footer ul li i {
    color: #fff;
    font-size: 20px;
    line-height: 17px; 
}

#app-footer ul li i font {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400 !important;
    font-style: normal !important;
    display: block;
    line-height: 18px;
}


#app-footer ul li i:hover,
#header i.active {
    color: #fad81e;
}

#app-footer ul li i.active,
#header i.active  {
    color: #fad81e;
}

#app-footer ul li span {
    background: #fad81e;
    position: relative;
    width: 18px;
    height: 18px;
    display: block;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    top: 15px;
    right: -19px;
    line-height: 19px;
}


.cart-div {
    width: 40px;
    margin: 0 auto;
}

/* App home page */

#app-content .tabcontent.history {
    padding-top: 20px;
}

#app-content .tabcontent {
    padding: 0px;
    width: 100%;
}

#app-content .tabcontent h4 {
    font-weight: bold;
}

#app-content .row-main {
    width: 100%;
    height: auto;
    float: left;
}

#home .item-heading {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
    padding: 10px 15px 10px 15px;    
}

#home .item-heading span {
    float: right;
    font-size: 12px;
    font-weight: bold !important;
    padding-top: 8px;
}

#home .item-head {
    text-transform: capitalize;
}

#home .item-selection ul li .item-container .item-thumb {
    width: 100px;
    height: 100px;
    border: thin solid #38393e29;
    background-size: 100px 100px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-left:44px;
}

table.slide-tbl tr td .slide-image span,
#home .item-selection ul li .item-container .item-thumb span {
    position: relative;
    padding: 3px 7px 2px 7px;
    background: #fad81e;
    color: #000 !important;
    font-size: 10px !important;
    line-height: 10px;
    border-radius: 10px;
    margin-top: 8px;
    font-weight: 500;
    left: 10px;
}

table.slide-tbl tr td .slide-image span {
    left: 73px !important;
    top: 9px !important;
    padding: 1px 10px !important;
}

.slide-td-rhs {
    text-transform: capitalize;
}

#home .item-selection ul {
    list-style: none;
    width: max-content;
    margin-left: 15px;
}

#home .item-selection ul li {
    float: left;
    padding-right: 10px;
    white-space: normal; 
}

#home .item-selection ul li .item-container {
    font-size: 12px;
    width: 100px;
    height: auto;
    line-height: 17px;
}

#home .row-main {
    margin-bottom: 24px;
}


@media (max-width: 576px) {
    .modal-dialog.modal-dialog-slideout {
        width: 100%
    }
}

/* Slide out section */

.modal-dialog-slideout {
    min-height: 100%;
    margin: 0 auto 0 0;
    background: #fff;
}

.modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    flex-flow: column;
}

.modal-dialog-slideout .modal-content {
    border: 0;
    max-height: 100vh;
    height: auto;
}

.modal-body {
    padding: 0 !important;
}

#sidemodal .close {
    float: left;
}

#sidemodal .modal-header .close {
    padding: 1.2rem 0 !important;
    font-size: 26px !important;
    margin: -1rem -1rem -1rem 0 !important;
}


#item-slide {
    margin: 0;
    padding: 0 !important;
    width: 100%;
    float: left;
}

#sidemodal .modal-header,
#sidemodal .modal-footer { 
    border-bottom: 0 !important;
    border-top: 0 !important;
    padding: .8rem 1rem !important;

}



#sidemodal .preloader-inner { 
    background-color: transparent;
}


#sidemodal .slide-top,
#sidemodal . {
    width: 100%;
    float: left;
    height: auto;
    padding: 0 0rem;
}

#sidemodal .slide-bottom {
    padding:  1rem 1rem 10rem 1rem;
}

#sidemodal .slide-top-container {
    width: 100%;
    float: left;
    padding: 0 1rem;
}

#sidemodal .slide-tbl {
    width: 100%;
    float: left;
}

#sidemodal .slide-tbl tr td.slide-td-lhs {
    width: 130px;
    height: 130px;
    padding: 0;
}

#sidemodal .slide-tbl tr td.slide-td-lhs .slide-image {
    width: 130px;
    height: 130px;
    border: thin solid #38393e29;
    background-size: 130px 130px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 5px;
    margin-bottom: 5px;    
}

#sidemodal .slide-tbl tr td.slide-td-rhs {
    width: 100%;
    padding: 0 0 0 15px;
    vertical-align: top;
}

#slide h6,
#sidemodal h6 {
    margin: 0 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

#sidemodal .slide-tbl tr td.slide-td-rhs span {
    font-weight: bold;
}

.slide-bottom {
    width: 100%;
    float: left;
    padding: 0 0px;
}


#slide .tabss {
  overflow: hidden;
  border: 0px;
  padding: 15px 0 0 0;
}

#slide .tabss ul {
    list-style-type: none;
}


/* My stuff */

/*
#sidebartab .tab-content {
    overflow: hidden; 
    height: 500px;
}
*/

/* Style the buttons that are used to open the tab content */
#slide .tabss ul li {
    font-size: 14px;
    font-weight: normal;
    text-transform: capitalize;
    color: #374a5e;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 29px;
    padding: 6px 12px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: none;
    -o-transition: none;
    margin-right: 8px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
#slide .tabss ul li:hover {
  background-color: #fff;
}

/* Create an active/current tablink class */
#slide .tabss ul li.active {
    font-weight: bold;
    border: 1px solid #374a5e;
}

/* Style the tab content */
#slide .tabcontentss {
  display: none;
  border: 0;
  border-top: none;
  width: 100%;
  padding: 20px 0 20px 0;
  width: 100%;
  float: left;
}

#bottom-slide {
    padding-top: 10px;
}

#bottom-slide  h6 {
    margin-bottom: 10px;
}

#bottom-slide .html-container {
    width: 100%;
    float: left;
    padding-top: 20px;
}

.html-container {
    padding-top: 15px;
}

.audio-contents {
    padding-top: 10px;
}



#slide-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #3d3d3d;
    color: white;
    text-align: center;
    padding: 10px 0 5px 0;
}

#slide-footer .slide-footer-lhs {
    width: 50%;
    float: left;
    height: 40px;
    font-weight: bold;
    padding-top: 8px;
}

#slide-footer .slide-footer-rhs {
    width: 50%;
    float: right;
    height: 40px;
}

.template-button-3 {
    padding: 6px 20px;
    margin-left: 10px;
    font-size: 12px;
    border: 0;    
    color: #000;
    background-color: #fad81e;
    border-radius: 30px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    display: inline-block;
    border: 1px solid #fad81e !important;   
}


/* my stuff tab */
/* settings tab */


/* Style the tab */
#sidebartab .tabm,
#sidebartab .tabt {
  overflow: hidden;
}

#sidebartab .tabm ul.tabmm,
#sidebartab .tabt ul.tabtt {
    list-style-type: none;
    margin-left: 13px;
}

/* Style the buttons that are used to open the tab content */
#sidebartab .tabm ul li,
#sidebartab .tabt ul li {
    font-size: 12px !important;
    font-weight: normal;
    text-transform: capitalize;
    color: #374a5e;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 24px;
    padding: 4px 8px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    margin-right: 5px;
}

/* Change background color of buttons on hover */
#sidebartab .tabm ul li:hover,
#sidebartab .tabt ul li:hover  {

}

/* Create an active/current tablink class */
#sidebartab .tabm ul li.active,
#sidebartab .tabt ul li.active {
    font-weight: bold !important;
    border: 1px solid #374a5e !important;
}

/* Style the tab content */
#sidebartab .tabcontentm,
#sidebartab .tabcontentt {
  display: none;
  padding: 6px 12px 60px 6px;
  border-top: none;
  width: 100%;
  float: left;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden !important;
}



/* Course info, question and notes tab */
.course-tabs-lhs {
  overflow: hidden;
}

.course-tabs-lhs ul {
    list-style-type: none;
}

.course-tabs-lhs ul li {
    font-size: 12px !important;
    font-weight: normal;
    text-transform: capitalize;
    color: #374a5e;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 24px;
    padding: 4px 8px;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    margin-right: 0px !important;  
    transition: 0.3s;
}

.course-tabs-lhs ul li:hover {
    font-weight: bold !important;
    border: 1px solid #374a5e !important;
}


.course-tabs-lhs ul li.active {
    font-weight: bold !important;
    border: 1px solid #374a5e !important;
}

.tabcontentc {
  display: none;
  border-top: none;
  width: 100%;
}

.tabcontentc ol {
    margin-left: 14px;
}

#item-slide .logo-middle {
    margin-left: 20px;
    padding-top: 4px;
}

.modal-body.blog-slide {
    height: fit-content;
    overflow-y: scroll;    
}

.lesson-detail-container,
.tab-content.course-slide {
    height: 100vh;
    overflow-y: scroll;
}

/* App Cart page */

#cart {
    padding: 0 15px;
}



.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container {
    padding-left:  0 !important;
    padding-right: 0 !important;
}


.row.mobile-cart {
    padding: 0 15px;
    width: 100%;
    float: left;
}

.subtotal,
.discount,
.shipping,
.total,
.totals-part,
.single-cart-item,
.buttons {
    width: 100%;
    float: left;
}

.totals-part {
    margin-top: -15px !important;
    margin-bottom: 15px !important;
}

#mobile-cart-footer span.text {
    width: 50%;
    float: left;
}

#mobile-cart-footer span.price {
    width: 50%;
    float: right;
    text-align: right;
}

#mobile-cart-footer span.bold {
    font-weight:  bold;
}

.mobile-cart-image {
    height: 130px;
    width: 130px;
    border: thin solid #38393e29;
    background-size: 130px 130px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 5px;
    float: left;
}

.mobile-cart-product-info {
    padding-left: 15px;
    width: calc(100% - 130px);
    float: right;
}

ul.cart-mobile-ul {
    margin-top: 15px;
    list-style-type: none;
}

ul.cart-mobile-ul li {
    width: 20%;
    float: left;
}

input.ajax-update.quantity-item {
    padding: 8px 6px;
    width: 40px;
}

a.remove.template-button-2 {
    padding: 7px 16px !important;
}

#mobile-cart-footer input.ajax-update.discount-code {
    width: 100%;
}

.coupon-part {
    width: 100%;
}

#mobile-cart-footer button.coupon-button {
    bottom: 44px;
    padding: 10px 26px;
    position: relative;
    right: 3px;
    float: right;
}

#mobile-cart-footer .buttons {
    margin-bottom: 50px;
}

#mobile-cart-footer .template-button.ajax-checkout {
    padding: 7px 16px;
    margin-top: 3px;
}

/* Checkout part */

#address-part input,
#address-part select
 {
    width: 100%;
    margin-bottom: 5px;
}

#address-part select {
    padding: 12px 18px;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    color: #838383;
}

#address-part label {
    display: none;
}

.checkout-area {
    padding:  0 15px;
}


#checkout-area .collapsible {
  cursor: pointer;
  width: 100%;
}

#checkout-area .active, #checkout-area .collapsible:hover {
  background-color: #ccc;
}

#checkout-area .content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

#checkout-area {
    width: 100%;
    float: left;
}

#checkout-area .reset-lhs,
#checkout-area .button-rhs {
    width: 100%;
    float: left;
    padding: 0 0 15px 0;
}

#checkout-area .card-body {
    padding: 15px 0 15px 0;
    border: 0;
}

#checkout-area .place-order-button {
    color: #fff;
    padding: 8px 24px;
    border-radius: 10px;
    font-size: 14px;
    text-transform: capitalize;
    background-color: #606060;
    border: 1px solid #606060;
    display: inline-block;
    width: auto;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

#checkout-area .pay-button {
    color: #fff;
    padding: 0px 24px;
    border-radius: 10px;
    font-size: 14px;
    text-transform: capitalize;
    background-color: #17a2b8;
    border: 1px solid #17a2b8;
    display: inline-block;
    width: auto;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}



/* Settings tab */

#login-tab label,
#profile label
 {
    display: none !important;
}

#login-tab input, 
#profile input {
    width: 100%;
    margin-bottom: 15px;
}

#login-tab .login-form,
#profile .login-form {
    padding-top: 15px;
}

#profile {
    overflow-y: auto;
    height: calc(100vh + 50px) ;
}

#profile .avator-box {
    display: none;
}

#devices {
    margin-top: -5px;
}
#device-tbl i {
    font-size: 30px;
    margin-right: 15px;
}

#device-tbl {
    width: 100%;
}

.preview-btn {
    float: right;
    color: #38393e;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    background-color: #fff;
    border: 1px solid #acacac;
    display: inline-block;
    width: auto;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;

}

#device-tbl .template-button {
    padding: 7px 16px;
    float:right;
}


#checkout-form {
    height: calc(100vh + 50px);
    overflow-y: scroll;
    display: block;    
}

#preview span {
    width:100%;
    float:left;
    font-weight:bold;
    padding-bottom:10px;
}

/* login */

#login-tab {
    padding: 0 15px;
}


    #contact-tbl {
        width:67%;
        margin: 50px auto 10px auto;
    }
    
    #contact-tbl tr td {
        width:25%;
        text-align:center;
    }
    
    #contact-tbl i {
        font-size: 24px;
        color: #30393e;
    }

    .tabcontentcon {
        display:block; 
        padding: 30px 20px 20px 20px;
    }

    #formcontact input, 
    #formcontact textarea {
        margin: 10px 0;
    }

    #formcontact input {
        width: 250px;
    }

    #formcontact textarea {
        border: 1px solid #eaeaea;
        width: 100%;
        padding: 10px;
    }
    
    
    /*