:root {
    --primary_size : 15px;
    --secondary_size : 12px;
    --custome_grey : rgba(0,0,0,0.54);
    --custome_black : rgba(0,0,0,0.87);
    --default-icon-size :16px;
}
@media screen and (min-width: 601px){ /*WEB and TAB*/

    .q2-menu-tab .media{
        line-height: 20px !important;
        padding-top: 10px;
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .collapsible-click{
        position: relative;
        left: 98%;
    }

    /************************************* TEXT ALIGNMENT --START-- ***************************************/
    .float-right-web-tab{
        float: right !important;
    }
    .float-left-web-tab{
        float: left !important;
    }
    .align-right-web-tab{
        text-align: right !important;
    }
    .align-left-web-tab{
        text-align: left !important;
    }
    .align-center-web-tab{
        text-align: center !important;
    }
    /************************************* TEXT ALIGNMENT --END-- *****************************************/

    .navbar-fixed ~ .container{
        padding-top: 14px;
        padding-bottom: 14px;

    }



    /************************************* DASHBOARD -- START -- ***************************************/
    .dashboard-container{
        margin-top: 51px !important;
        width: 300px !important;
    }

    /************************************* DASHBOARD -- END -- ***************************************/

    /************************************* HEADER -- START -- ***************************************/
    .header-text-adjust{
        margin: 0 !important;
        padding-top: 0px !important;
    }
    .blue .twolinetitle{
        margin-top:-7px !important;
    }
    .blue .twolinetitle p:first-child{
        color: white !important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: 0px 0px 0px 0px !important;
    }
    .blue .twolinetitle p:nth-child(2){
        color: white !important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 !important;
        margin: -17px 0px 0px 0px !important;
        line-height: 0px;
        opacity: 0.6 !important;
    }
    .white .twolinetitle p:first-child{
        color: var(--custome_black)!important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: -10px 0px 0px 0px !important;

    }
    .white .twolinetitle p:nth-child(2){
        color: var(--custome_grey)!important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 ;
        margin: -12px 0px 0px 0px !important;
        line-height: 0px;
    }
    .twolinetitlewhite p:first-child{
        color: white !important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: -10px 0px 0px 0px !important;
    }
    .twolinetitlewhite p:nth-child(2){
        color: white !important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 !important;
        margin: -16px 0px 0px 0px !important;
        line-height: 0px;
        opacity: 0.6 !important;
    }

    /************************************* HEADER -- END -- ***************************************/

    .card:not(.exception){
        min-height: calc(100vh - 361px) !important;
    }
    .exception .card{
        min-height: calc(100vh - 1px) !important;
    }

}
@media screen and (max-width: 993px){ /*MOB and TAB*/

    /************************************* SCROLL --START-- ***************************************/
    *::-webkit-scrollbar-thumb{background-color:none;outline:0px solid slategrey;border-radius: 20px}
    *::-webkit-scrollbar{width:0px !important;height:0px !important}
    *::-webkit-scrollbar-track{-webkit-box-shadow:none}
    *::-webkit-scrollbar-thumb:hover {background: none !important}*::-webkit-scrollbar:hover{background: none;}
    /************************************* SCROLL --END-- ***************************************/



    /****************************************************** Card adjustment ==START== *******************************/
    .card .card-detail{
        max-height:calc(100vh - 70px - 48px ) !important;
        height:calc(100vh - 70px - 48px ) !important;
        overflow-y: auto !important;
    }
    .card .card-comment{
        padding: 0px 16px 0px !important;
        border-radius: 0px 0px 4px 4px !important;
        border: 0px !important;
        border-top: 0px !important;
        margin: 0px !important;
        box-shadow: 0px -2px 4px 0 rgba(0, 0, 0, 0.16), 0px -3px 10px 0 rgba(12, 12, 12, 0.01) !important;
        position: fixed;
        background-color: inherit;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100 !important;
        height: 56px !important;
    }
    .card-comment .media{
        padding-top:5px !important;
    }
    .card .card-comment-wrapper{
        padding: 10px 16px 0px !important;
        border-radius: 0px 0px 4px 4px !important;
        border: 0px !important;
        border-top: 0px !important;
        margin: 0px !important;
        box-shadow: 0px -2px 4px 0 rgba(0, 0, 0, 0.16), 0px -3px 10px 0 rgba(12, 12, 12, 0.01) !important;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100 !important;
        background-color: #fff !important;
    }
    /****************************************************** Card adjustment ==END== *******************************/

    .q2-menu-tab .media{
        line-height: 20px !important;
        padding-top: 10px;
        margin-bottom: 15px;
        margin-top: 15px;
    }

    /************************************* TEXT ALIGNMENT --START-- ***************************************/
    .float-right-mob-tab{
        float: right !important;
    }
    .float-left-mob-tab{
        float: left !important;
    }
    .align-right-mob-tab{
        text-align: right !important;
    }
    .align-left-mob-tab{
        text-align: left !important;
    }
    .align-center-mob-tab{
        text-align: center !important;
    }
    /************************************* TEXT ALIGNMENT --END-- *****************************************/

    /***********************************Font styling --START-- ***********************************/
    .font-grey-15-13{
        font-size: var(--secondary_size) !important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-nocolor-15-13{
        font-size: var(--secondary_size)!important;
        font-weight: 400;
    }
    /***********************************Font styling --END-- ***********************************/

    /***********************************FAB styling --START-- ***********************************/
    .btn-floating.space_bottom{
        bottom: 72px !important;
    }
    /***********************************FAB styling --END-- ***********************************/

    /******************************* CUSTOME Tab css   --START--  **********************************/

    .custome-tabs .lhs li{
        display: block !important;
        width:100%;
        text-transform: none !important;
        flex-grow: 0 !important;
        -webkit-flex-grow: 0 !important;
        color: rgba(0,0,0,0.87) !important;

    }
    .custome-tabs .lhs ul{
        min-height: calc(100vh - 97px) !important;
        flex-direction: column !important;
    }
    .custome-tabs .rhs{

        background: #fff !important;
        min-height: calc(100vh - 97px) !important;

    }
    .custome-tabs .lhs{
        display: block;

    }
    .custome-tabs .lhs li{
        text-align: left !important;
    }
    .custome-tabs .tabs .indicator{
        display: none !important;
    }

    /******************************* CUSTOME Tab css  -- END --  **********************************/
    .version-adjust{
        padding-top: 10px !important;
        padding-left: 20px !important;
    }
    /******************************* PADDING css  -- START --  **********************************/
    .tm-padding-left-10{
        padding-left: 10px !important;
    }
    /******************************* PADDING Tab css  -- END --  **********************************/

    /******************************* SELECT CONTAINER css  -- START --  **********************************/
    .select2-container--krajee .select2-selection--single {
        height: 34px;
        line-height: 1.428571429;

    }
    /******************************* SELECT CONTAINER css  -- END --  **********************************/
      nav ul.right  btn {
    margin-top: -7px !important;

}
}
@media screen and (max-width: 600px){ /*ONLY MOBILE*/
    .collapsible-click{
        position: relative;
        left: 90%;
    }

    /************************************* CARD -- START -- ***************************************/
    .card:not(.exception){
        min-height: calc(100vh - 2px) !important;
    }
    .container{
        padding-bottom: 0px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /************************************* CARD -- END -- ***************************************/

    /************************************* MODAL --START-- ***************************************/
    .modal-full-size{
        top:0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .modal-300{
        width: 300px !important;
    }
    .modal{
        width: 300px !important;
    }

    /************************************* MODAL  --END-- *****************************************/

    /************************************* MARGIN --START-- ***************************************/
    .mob-margin-0{
        margin: 0px !important;
    }
    /************************************* MARGIN --END-- *****************************************/

    /************************************* TEXT ALIGNMENT --START-- ***************************************/
    .float-right-mob{
        float: right !important;
    }
    .float-left-mob{
        float: left !important;
    }
    .align-right-mob{
        text-align: right !important;
    }
    .align-left-mob{
        text-align: left !important;
    }
    .align-center-mob{
        text-align: center !important;
    }
    /************************************* TEXT ALIGNMENT --END-- *****************************************/

    /***********************************Font styling --START-- ***********************************/
    .font-black-15{
        font-size:var(--primary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-black-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-grey-15{
        font-size: var(--primary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-grey-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-15-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    /*********************************Font styling --END-- ****************************************/
    .container{
        width: 100% !important;
    }
    .navbar-fixed ~ .container{
        padding-top: 0px;
        padding-bottom: 14px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sticky-bottom-signup {
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 500;
        height: 50px;
        padding: 8px;
        box-shadow: 0px -1px 5px 0 rgba(0,0,0,0.12), 0px -2px 1px -2px rgba(0,0,0,0.2), 0px -2px 2px 0 rgba(0,0,0,0.14);
    }
    .product_qty .input-field{
        margin: 0 auto !important;
        width: 100%;
    }
    /************************************* Hiding/Showing Content -- START -- ***************************************/
    .show-on-tab-only{
        display: none!important;
    }
    /************************************* Hiding/Showing Content -- END -- ***************************************/

    /************************************* DASHBOARD -- START -- ***************************************/
    .dashboard-container{
        margin-top: 0px !important;

    }
    /************************************* DASHBOARD -- END -- ***************************************/

    /************************************* HEADER -- START -- ***************************************/
    .header-text-adjust{
        padding-top: 0px !important;
        margin-bottom:  0 !important;
        margin-top: 0px !important;
    }
    .header-select-adjust{
        position: absolute;
        width: 200px !important;
        left: 27px;
        top: 0px;
    }
    .header-select-adjust input{ var(--secondary_size)!important;}
    .header-select-adjust-with-arrow{
        position: absolute;
        width: 200px !important;
        left: 55px;
        top: 5px;
    }
    .header-select-adjust-with-arrow input{ font-size: var(--secondary_size)!important;}

    .white .twolinetitle p:first-child{
        color: var(--custome_black)!important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: -10px 0px 0px 0px !important;

    }
    .white .twolinetitle p:nth-child(2){
        color: var(--custome_grey)!important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 ;
        margin: -8px 0px 0px 0px !important;
        line-height: 0px;
    }
    .blue .twolinetitle{
        margin-top: -7px !important;
    }
    .blue .twolinetitle p:first-child{
        color: white !important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: 0px 0px 0px 0px !important;

    }
    .blue .twolinetitle p:nth-child(2){
        color: white !important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 !important;
        margin: -14px 0px 0px 0px !important;
        line-height: 0px;
        opacity: 0.6 !important;
    }
    .twolinetitlewhite p:first-child{
        color: white !important;
        font-size:  18px !important;
        font-family:"Roboto",medium;
        font-weight: 500 !important;
        margin: -10px 0px 0px 0px !important;
    }
    .twolinetitlewhite p:nth-child(2){
        color: white !important;
        font-size:  13px !important;
        font-family:"Roboto",medium;
        font-weight: 400 !important;
        margin: -10px 0px 0px 0px !important;
        line-height: 0px;
        opacity: 0.6 !important;
    }
    /************************************* HEADER -- END -- ***************************************/
}
@media screen   and (min-width: 601px) and (max-width: 992px){ /*ONLY TAB*/
    /************************************* TEXT ALIGNMENT -- START -- ***************************************/
    .float-right-tab{
        float: right !important;
    }
    .float-left-tab{
        float: left !important;
    }
    .align-right-tab{
        text-align: right !important;
    }
    .align-left-tab{
        text-align: left !important;
    }
    .align-center-tab{
        text-align: center !important;
    }
    /************************************* TEXT ALIGNMENT -- END -- *****************************************/

    /***********************************Font styling --START-- ***********************************/
    .font-black-15{
        font-size: var(--primary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-black-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-grey-15{
        font-size: var(--primary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-grey-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-15-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }

    /*********************************Font styling --END-- ****************************************/
    .product_qty .input-field{
        margin: 0 auto !important;
        width: 100px;
    }
    /************************************* Hiding/Showing Content -- START -- ***************************************/
    .show-on-tab-only{
        display: block;
    }
    /************************************* Hiding/Showing Content -- END -- ***************************************/

    /********************************* MODAL -- START -- ****************************************/
    .modal-300{
        width: 300px !important;
    }
    .modal{
        width: 600px !important;
    }
    /********************************* MODAL -- START -- ****************************************/

}

@media screen and (min-width: 993px){ /*ONLY WEB ****/
    /***************************************************** Card adjustment ==START== ******************************/
    .card .card-detail{
        max-height:calc(85vh - 100px - 60px ) !important;
        height:calc(85vh - 100px - 60px ) !important;
        overflow-y: auto !important;
        margin-right: -15px !important;
        padding-right: 15px !important;
    }
    .card .card-comment{
        padding: 0px 16px 0px !important;
        border-radius: 0px 0px 4px 4px !important;
        border: 0px !important;
        border-top: 0px !important;
        margin: 0px -16px -9px -16px  !important;
        box-shadow: 0px -2px 4px 0 rgba(0, 0, 0, 0.16), 0px -3px 10px 0 rgba(12, 12, 12, 0.01) !important;
        position: relative;
        background-color: inherit;
        z-index: 100 !important;
    }
    .card .card-comment-wrapper{
        padding: 0px 16px 0px !important;
        border-radius: 0px 0px 4px 4px !important;
        border: 0px !important;
        border-top: 0px !important;
        margin: 0px   !important;
        box-shadow: 0px -2px 4px 0 rgba(0, 0, 0, 0.16), 0px -3px 10px 0 rgba(12, 12, 12, 0.01) !important;
        position: relative;
        background-color: inherit;
        z-index: 100 !important;
        background-color: #fff !important;
    }
    /***************************************************** Card adjustment ==END== ******************************/
    .info-small{
        max-width:480px !important;
    }
    .info-large{
        max-width:960px !important;
    }
    .hover-cta{
        display:none
    }
    .hover-cta-container:hover  .hover-cta{
        display:inline-block
    }
    .hover-cta-container{
        padding: 10px 0px;
    }
    .hover-cta-container  .hover-cta-container{
        padding:0px !important
    }

    /************************************ TEXT ALIGNMENT --START-- **************************************/
    .float-right-web{
        float: right !important;
    }
    .float-left-web{
        float: left !important;
    }
    .align-right-web{
        text-align: right !important;
    }
    .align-left-web{
        text-align: left !important;
    }
    .align-center-web{
        text-align: center !important;
    }
    /************************************ TEXT ALIGNMENT --END-- ****************************************/


    /**********************************Font styling --START-- **********************************/
    .font-black-15{
        font-size: var(--primary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-black-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-grey-15{
        font-size: var(--primary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-grey-13{
        font-size: var(--secondary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-15-13{
        font-size: var(--primary_size)!important;
        color: var(--custome_black)!important;
        font-weight: 400;
    }
    .font-grey-15-13{
        font-size: var(--primary_size)!important;
        color: var(--custome_grey)!important;
        font-weight: 400;
    }
    .font-nocolor-15-13{
        font-size: var(--primary_size)!important;
        font-weight: 400;
    }

    /********************************Font styling --END-- ***************************************/
    .product_qty .input-field{
        margin: 0 auto !important;
        width: 100px;
    }
    /************************************ Hiding/Showing Content --START-- **************************************/
    .show-on-tab-only{
        display: none!important;
    }
    /************************************ Hiding/Showing Content --END-- **************************************/
}
@media screen and (min-width: 1024px)
{   /* ONLY WEB --size "1024 and above" -- */

}