/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18/04/2016, 03:19:55 PM
    Author     : Cinnco
*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1200px){
    
    /* Home page */        
    #error-message-login, #success-message-login{
        position: initial;
        width: 100%
    }
    
    .select-role{
        margin-top: 30px !important;
        width: 100% !important
    }    

    .transparentButton
    {
       margin-top: 30px;
       width: 75%          
    }

    .sslgreen
    {        
        margin-top: 30px;
        width: 75%
    }

    #login-form
    {
        margin-top: 290px
    }    
    
    /* main avail */
    
    .main_avail{
        padding-left: 178px;
        padding-right: 50px;
        padding-top: 105px;
    }
    
    .indicator_avail{
         margin-bottom: 15px
     }
     
     .div_library{
        margin-bottom: 15px
    }
    #sortable1 li, #sortable2 li, #sortable3 li {
        width: 88%;
    }
    .div_search input {
        width: 87%;
    }
    .icon_search {
        width: 13%;
    }
    /* navbar menu */
    .logo_avail {
        margin-left: 14px;
        margin-top: 11px;
        width: 133px;
    }
    .icon_display{
        margin-right: 38px;
    }
    .navbar_avail{
        height: 78px;
    }
    .navbar_avail .list_menu{
       position: relative;
    }
    
    .navbar_avail .avatar_avail{
        float: right;
        margin-right: 55px;
        width: 49px
    }   
    
    .open-menu{
        display: none
    }
    .list_user{
        margin-top: 78px !important;
    }
    
    .sidebar_avail{     
        margin-top: 73px;
        width: 100px;
    }      
    
    #navbar_avail li{
        padding: 0px;
    }
    .icon_menu{
        font-size: 35px !important;
        margin-left: -2px !important;
    }       
    
    /* Profile detail */    
    
    .div_details_profile{
       min-height: 230px;
       padding: 20px 0px;
    }   
    
    .div_details_profile img{
        margin: 0 auto;
        margin-bottom: 10px
    }
    
    .div_details_profile  select{
        max-width: 100px
    }   
    .menu_learner {
        margin-bottom: 20px;
        width: 100%;
    }
    .photo_profile{
        width: 150px;
    }
    .div_function .div_left1, .div_function .div_left2, .div_function .div_left3, .div_function .div_left4 {
        padding-left: 10px;
        padding-top: 10px;
    }
    .div_function .div_right1 .description_function, .div_function .div_right2 .description_function, .div_function .div_right3 .description_function, .div_function .div_right4 .description_function {
        padding: 27px 5px 23px 23px;
    }
     /* form create/update */
    .btn-container{
        text-align: center
    }
    
    /*nav tabs*/
    .nav-tabs>li>a {
        padding: 0px;
    }
    
    /*list task*/
    .div-content-task {
        padding: 10px;
    }
    .div_task .icons_task {
        margin-right: -116px;
    }
    .btn_close{
        right: 10px;
        top: 9px;
    }
    /*Modal schedule*/
    .modal-backdrop {
        z-index: 1000;
    }
    .modal-date-assessment {
        width: 368px;
        left: 4%;
    }
    #scheduleForm{
        top: 90px;
    }
    #datepicker{
        font-size: 15px;
        margin-left: 6%;
    }
    /*Modal steps*/
    .modal-steps {
        margin-top: 100px;
        -webkit-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        -moz-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
    }
    .icon_step{
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    .div_task{
        height: 415px;
    }
    .pagination li{
        padding: 0px;
    }
    .table-responsive{
        overflow-x: auto;
    }
    
    /* Learners list */
    
    #learners_list .pagination{
        float: right
    }
    .image_profile{
        margin-left: 25%;
        width: 50% !important;
    }
    #external-events{
        height: initial;
        margin-top: 20px;
    }
    .task-schedule{
        overflow: auto;
    }
}

@media only screen 
and (max-width : 768px){
    .div_details_profile{
        height: 450px;
    }
    .data_learner, .specs_learner{
        float: none;
        display: block;
    }
    .form-group > .mode_learner{
        float: none;
    }
    .modal-backdrop{
        z-index: 0;
    }
    .modal.fade.in{
        background: rgba(0,0,0,0.5);
    }
}

@media only screen 
and (max-width : 1024px){
    .specs_learner > select{
        float: none;
        max-width: 100%;
    }
}

@media only screen 
and (max-width : 1023px){
    .date_report_left{
        border-right: 0;
    }
}

@media only screen 
and (max-device-width: 767px)
and (min-device-width : 401px)
and (orientation : landscape){
    
   /* Home page */        
    
    #error-message-login, #success-message-login{
        position: initial;
        width: 100%
    }
    
    .select-role{
        margin-top: 15 !important;
        width: 100% !important
    }
    
    #forgot_password{
        float: left
    }

    .transparentButton
    {
       margin-top: 30px;
       width: 75%          
    }

    .sslgreen
    {        
        margin-top: 30px;
        width: 75%
    }

    #login-form
    {
        margin-top: 290px
    }
    
    /* navbar menu */
    .navbar_avail{
        height: 74px;
    }
    
    .navbar_avail .logo_avail{
        margin-left: 12%;
        margin-top: 10px;
        width: 140px
    }
    
    .navbar_avail .avatar_avail{
        margin-left: 62%;
        width: 35px
    }            
    .icon_menu{
        font-size: 40px !important;
        margin-left: 7px !important;
    }
    
    #navbar_avail li {
        padding: 0px;
    }
    .open-menu{
        color: rgb(0,113,186);
        font-size: 45px;
        padding-left: 3px;
        top: 13px;
    } 
    .open-menu span{
        float: left;
        margin-left: 30px;
    }
    .sidebar_avail{
        display: none;
        margin-top: 71px;
        overflow-y: scroll;
        width: 100px;
    }
    
    /* main container avail  */
    
    .main_avail{
        margin: 0;
        padding: 95px 10px 0 10px !important;
    }
    
    .indicator_avail{
       height: 65px !important;
        margin-bottom: 10px
    }
    .indicator{
        left: 5px;
        padding-left: 10px;
        padding-right: 33px;
    }
    .icon_dashboard {
        height: 40px;
        width: 40px;
    }
    .div_left_indicator{
        font-size: 30px;
    }
    .div_right_indicator{
        font-size: 17px;
        margin-left: -3px;
        width: 67%;
    }
    .number_indicator {
        font-size: 30px;
    }
    
    .div_library{
        margin-bottom: 10px;
        width: 98%;
    }
    /*panels tasks*/
    #ul_admin_tasks, #ul_library_shared, #ul_library_avail{
        display: flex;
        height: 115px;
        margin-left: 13px;
        overflow-x: scroll;
        width: 96%;
    }
    .li_task{
        display: inline-table;
        margin-left: 1%;
        margin-right: 1%;
        padding: 2px !important;
        width: 250px;
    }
    .pager{
        margin: 0px 0px 20px 0px;
    }
    
    /* form create/update */
    .btn-container{
        text-align: center
    }
    .li_drag{
        width: 92% !important;
    }
    
    /* Learners list */
    
    .div_img_user .avatar_user{
        height: 100%;
        margin: 0 auto;
        width: auto;
    }    
    .spacer_index{
        display: none !important;
    }
    .search_learner{
        margin-left: 0px;
        margin-right: 0px;
        width: 32%;
    }
    #search_manager_btn, #search_facilitator_btn, #search_learner_btn{
        width: 32%;
    }
    
    #learners_list .pagination{
        float: right;
        margin-right: 4%
    }
    
    /*tables*/
    .table-responsive{
        padding: 20px 0px;
    }
    /*tabs*/
    .nav-tabs>li>a {
        padding: 0px;
    }
    .nav-tabs>li {
        font-size: 10px;
    }
    .wizard-type2>.nav-tabs>li {
        height: 74px;
    }
    .wizard-type2>.nav-tabs>li>a {
        font-size: 20px;
        top: 7px;
    }
    /*List tasks*/
    .div-content-task {
        padding: 10px 30px;
    }
    .btn_close{
        right: 29px;
        top: 9px;
    }
    /*profile learner*/
    .panel-detail {
        padding: 10px 10px 30px 10px !important;
    }
    .menu_learner{
        padding-top: 10px;
        width: 100%;
    }
    .photo_profile{
        width: 170px;
    }
    .div_details_profile{
       min-height: 416px;
       padding: 20px 0px !important;
    }   
    
    .div_details_profile img{
        margin: 0 auto;
        margin-bottom: 10px
    }
    
    .div_details_profile  select{
        max-width: 100px
    }
    .div_function .div_left1, .div_function .div_left2, .div_function .div_left3, .div_function .div_left4 {
        padding-left: 17px;
        padding-top: 2px;
    }
    .div_function .div_left1 .circle1, .div_function .div_left2 .circle2, .div_function .div_left3 .circle3, .div_function .div_left4 .circle4 {
        margin-left: 0%;
        margin-top: 12px;
    }
    .div_function .div_right1 .description_function, .div_function .div_right2 .description_function, .div_function .div_right3 .description_function, .div_function .div_right4 .description_function {
        font-size: 16px;
        letter-spacing: 1px;
        padding: 23px 5px 23px 16px;
    }
    .description_function img {
        margin-top: -7px !important;
    }
    .div_function {
        height: 88px;
    }
    /*List tasks*/
    .div-content-task {
        padding: 10px;
    }
    .div_task{
        font-size: 16px;
        height: 417px;       
    }
    .div_task .data_task h2{
        font-size: 22px;
        line-height: 23px;
        margin-bottom: -2px;
    }

    .btn_close{
        right: 10px;
        top: 9px;
    }
    .icon-list-task {
        margin-left: 78%;
        max-width: 38px;
    }
    .div_task .icons_task {
        margin-left: -5px;
    }
    /*Modal schedule*/
    .modal-backdrop {
        z-index: 0;
    }
    .modal-date-assessment {
        width: 368px;
        left: 4%;
    }
    #scheduleForm{
        top: 90px;
    }
    #datepicker{
        font-size: 15px;
        margin-left: 6%;
    }
    /*Modal steps*/
    .modal-steps {
        margin-top: 100px;
        -webkit-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        -moz-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
    }
    .icon_step{
        padding-left: 32%;
    }
    /*Forms design*/
    .form-group:not(.has-feedback) input:not(.btn), .form-group select, .form-group textArea, .form-organization input, .containerSwitch {
        float: none;
        width: 100% !important;
    }
    .panel-default .panel-body-list {
        padding: 10px;
    }
    .pagination li{
        padding: 0px;
    }
    .simple-tab{
        top: 45% !important;
    }
    /*Edit profile*/
    .image_profile{
        margin-left: 25%;
        width: 50% !important;
    }
    .navigate{
        display: none;
    }
    .btn_select{
        right: 9px;
        top: 9px;
    }
    .div-next span, .div-back span{
        padding: 8px 39%;
    }
    .text-report{
        font-size: 20px;
        padding: 10px;
    }
    .ul_graphs li {
        padding: 10px !important;
    }
    .panel-heading-month {
        font-size: 17px;
    }
    .icon_show_dates{
        font-size: 25px !important;
        margin-right: 8px;
    }
    .date_report_left{
        border-right: none;
    }
    #preview_report, #download_report {
        font-size: 20px;
        margin-bottom: 15px;
        padding: 13px 26px 2px 27px;
    }
    #preview_report i, #download_report i {
        font-size: 32px;
    }
    .name_learner_report{
        margin-top: -25px;
    }
    .div_title_month {
        left: 0px;
    }
    .panel-heading-month{
        padding: 10px;
        text-align: center;
    }
    .panel-month{
        padding: 19px 3px;
    }
    .icon_display_month{
        font-size: 20px !important;
        margin-top: -4px;
    }
    #name_profile_detail, #name_profile_facilitator, #name_profile_schedule, #name_profile_user {
        margin-top: -28px;
    }
    .btn-switch-form{
        float: initial;
    }
    .align-right{
        float: left;
    }
    #external-events{
        height: initial;
        margin-top: 20px;
        overflow: auto;
    }
    .sidebar ul.nav.nav-sidebar li a i {
        font-size: 60px !important;
        margin-top: 9%;
    }
}


@media only screen 
and (max-device-width: 767px)
and (min-device-width : 401px)
and (orientation : portrait){
    
    /* Home page */        
    
    #error-message-login, #success-message-login{
        position: initial;
        width: 100%
    }
    
    .select-role{
        margin-top: 15px !important;
        width: 100% !important
    }
    .modal-login{
        padding: 10px;
    }
    .login-box-body{
        padding: 10px;
    }
    
    #forgot_password{
        float: left
    }

    .transparentButton
    {
        margin-top: 30px;
        width: 75%
    }

    .sslgreen
    {        
        margin-top: 30px;
        width: 75%
    }

    #login-form
    {
        margin-left: 40px;
        margin-right: 40px
    }
    
    /* navbar menu */
    .navbar_avail{
        height: 74px;
    }
    
    .navbar_avail .logo_avail{
        margin-left: 3%;
        margin-top: 10px;
        width: 140px
    }
    
    .navbar_avail .avatar_avail{
        margin-left: 62%;
        width: 35px
    }    
    .icon_menu_avail{
        margin-top: 4px;      
    }
    .icon-dashboard {
        left: 29%;
        top: 12px;
        width: 40%;
    }
    .icon_menu{
        font-size: 40px !important;
        margin-left: 7px !important;
    }
    #navbar_avail li {
        min-height: 100%;
        padding: 0px
    }
    .open-menu{
        color: rgb(0,113,186);
        font-size: 45px;
        padding-left: 3px;
        top: 13px;
    } 
    .open-menu span{
        float: left;
        margin-left: 30px;
    }
    /*left menu*/
    .sidebar_avail {
        display: none;
        margin-top: 60px;
        width: 100% !important
    }
    
    .sidebar_avail ul li a{            
        height: 100%;
        margin: 0 auto;
        width: 50%
    }
    
    .sidebar-menu .nav li {
        height: 130px;
        text-align: center;
        width: 50%
    }           
    
    .sidebar-menu .nav li .text-menu {                    
        bottom: 24px;            
        left: 0;
        position: absolute;
        right: 0
    }
    
    .sidebar ul.nav.nav-sidebar li a i {
        font-size: 60px !important;
        margin-top: 9%;
    }
    
    /* main container avail  */
    
    .main_avail{
        margin: 0;
        padding: 95px 10px 0 10px !important;
    }
    .li_drag{
        width: 89% !important;
    }
    .indicator_avail{
       height: 60px !important;
        margin-bottom: 10px
    }
    .indicator{
        left: 5px;
        padding-left: 10px;
        padding-right: 28px;
    }
    .icon_dashboard {
        height: 40px;
        width: 40px;
    }
    .div_left_indicator{
        font-size: 30px;
    }
    .div_right_indicator{
        font-size: 12px;
        margin-left: -3px;
        width: 67%;
    }
    .number_indicator {
        font-size: 23px;
    }
    
    .div_library{
        margin-bottom: 10px;
        width: 98%;
    }
    /*panels tasks*/
    #ul_admin_tasks, #ul_library_shared, #ul_library_avail{
        display: flex;
        height: 115px;
        margin-left: 7px;
        overflow-x: scroll;
        width: 96%;
    }
    .li_task{
        display: inline-table;
        margin-left: 1%;
        margin-right: 1%;
        padding: 2px !important;
        width: 250px;
    }
    .pager{
        margin: 0px 0px 20px 0px;
    }
    /* form create/update */
    .btn-container{
        text-align: center
    }
    
    /* Learners list */
    .div-image-learner {
       height: 275px;
    }
    .div_img_user .avatar_user{
        margin: 0 auto
    }    
    .search_learner{
        margin-left: 0px;
        margin-right: 0px;
        width: 47%;
    }
    #search_manager_btn, #search_facilitator_btn, #search_learner_btn{
        width: 95%;
    }
    /*tables*/
    .table-responsive{
        padding: 20px 0px;
    }
    /*tabs*/
    .nav-tabs>li>a {
        padding: 0px;
    }
    .nav-tabs>li {
        font-size: 10px;
    }
    .wizard-type2>.nav-tabs>li {
        height: 53px;
    }
    .wizard-type2>.nav-tabs>li>a {
        top: 15%;
    }
    /*List tasks*/
    .div-content-task {
        padding: 10px 30px;
    }
    .btn_close{
        right: 29px;
        top: 9px;
    }
    .div-no-users{
        padding: 11px 30px;
    }
    .div-no-users .no_users_message1{
        font-size: 22px;
    }
    .div-no-users .no_users_message2{
        font-size: 18px;
    }
    .div-no-users img{
        width: 135px;
    }
    .div-no-users a{
        padding: 11px 30px;
    }
    /*profile learner*/
    .panel-detail {
        padding: 10px 10px 30px 10px !important;
    }
    .menu_learner{
        padding-top: 10px;
        width: 100%;
    }
    .photo_profile{
        width: 240px;
    }
    #name_profile_detail, #name_profile_facilitator, #name_profile_schedule, #name_profile_user{
        margin-top: -28px;
    }
    .div_details_profile{
       min-height: 405px;
       padding: 20px 0px !important;
    }   
    
    .div_details_profile img{
        margin: 0 auto;
        margin-bottom: 10px
    }
    
    .div_details_profile  select{
        max-width: 100px
    }
    .div_function .div_left1, .div_function .div_left2, .div_function .div_left3, .div_function .div_left4 {
        padding-left: 17px;
        padding-top: 2px;
    }
    .div_function .div_left1 .circle1, .div_function .div_left2 .circle2, .div_function .div_left3 .circle3, .div_function .div_left4 .circle4 {
        margin-left: 0%;
        margin-top: 11px;
    }
    .div_function .div_right1 .description_function, .div_function .div_right2 .description_function, .div_function .div_right3 .description_function, .div_function .div_right4 .description_function {
        font-size: 16px;
        letter-spacing: 1px;
        padding: 23px 5px 23px 16px;
    }
    .description_function img {
        margin-top: -7px !important;
    }
    .div_function {
        height: 88px;
    }
    /*List tasks*/
    .div-content-task {
        padding: 10px;
    }
    .div_task{
        font-size: 14px;
        height: 417px;       
    }
    .div_task .data_task h2{
        font-size: 19px;
    }

    .btn_close{
        right: 10px;
        top: 9px;
    }
    .icon-list-task {
        margin-left: 78%;
        max-width: 38px;
    }
    .div_task .icons_task {
        margin-left: -5px;
    }
    /*Modal schedule*/
    .modal-backdrop {
        z-index: 0;
    }
    .modal-date-assessment {
        width: 368px;
        left: 4%;
    }
    #scheduleForm{
        top: 90px;
    }
    #datepicker{
        font-size: 15px;
        margin-left: 6%;
    }
    /*Modal steps*/
    .modal-steps {
        margin-top: 100px;
        -webkit-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        -moz-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
    }
    .icon_step{
        padding-left: 25%;
    }
    /*Forms design*/
    .form-group:not(.has-feedback) input:not(.btn), .form-group select, .form-group textArea, .form-organization input, .containerSwitch {
        float: none;
        width: 100% !important;
    }
    .panel-default .panel-body-list {
        padding: 10px;
    }
    .pagination li{
        padding: 0px;
    }
    .simple-tab{
        top: 45% !important;
    }
    /*Edit profile*/
    .image_profile{
        margin-left: 25%;
        width: 50% !important;
    }
    .navigate{
        display: none;
    }
    .btn_select{
        right: 9px;
        top: 9px;
    }
    .div-next span, .div-back span{
        padding: 8px 39%;
    }
    .text-report{
        font-size: 20px;
        padding: 10px;
    }
    .ul_graphs li {
        padding: 10px !important;
    }
    .panel-heading-month {
        font-size: 17px;
    }
    .icon_show_dates{
        font-size: 25px !important;
        margin-right: 8px;
    }
    .date_report_left{
        border-right: none;
    }
    #preview_report, #download_report {
        font-size: 20px;
        margin-bottom: 15px;
        padding: 13px 26px 2px 27px;
    }
    #preview_report i, #download_report i {
        font-size: 32px;
    }
    .name_learner_report{
        margin-top: -25px;
    }
    .div_title_month {
        left: 0px;
    }
    .panel-heading-month{
        padding: 10px;
        text-align: center;
    }
    .panel-month{
        padding: 19px 3px;
    }
    .icon_display_month{
        font-size: 20px !important;
        margin-top: -4px;
    }
    .label-data{
        font-size: 20px;
        padding: 0px 0px 15px 0px;
    }
    .btn-switch-form{
        float: initial;
    }
    .align-right{
        float: left;
    }
    #external-events{
        height: initial;
        margin-top: 20px;
        overflow: auto;
    }
}

@media (max-device-width: 400px) {
    
    /* Forms */
    
    .btn-container{
        text-align: center
    }
    
    /* Home page */
    
    #error-message-login, #success-message-login{
        position: initial;
        width: 100%
    }
    
    .select-role{
        margin-top: 15px !important;
        padding-left: 0;
        width: 100% !important
    }
    
    .select-role .col-xs-3{
        padding-left: 0;
        padding-right: 20px
    }
    
    .select-role .role{        
        width: 140%
    }
    
    .login-box-body{
        padding: 20px;
    }
    
    .modal-login{
        padding: 5px;
        width: 100%
    }
    
    #forgot_password{
        float: left
    }

    .transparentButton
    {
        margin-top: 30px;
        width: 90%
    }

    .sslgreen
    {        
        margin-top: 30px;
        width: 90%
    }

    #login-form
    {
        margin-left: 40px;
        margin-right: 40px
    }

    .linksBelow
    {   
        bottom: 2px; 
        margin-top: 20px;
        position: relative    
    }

.linksBelow p
    {
        color: #fff;
        display: inline-block;
        margin: 0 5px   
    }
    
    
    /* navbar menu */
    .navbar_avail{
        height: 64px;
    }
    .navbar_avail .avatar_avail{
        margin-left: 30%
    }
    .nav-sidebar>li>a {
        padding: 10px 15px !important;
    }
    .logo_avail{
        margin-left: -2%;
        width: 117px;
    }
    #navbar_avail li {
        padding-top: 8px;
    }
    .icon_menu_avail{
        left: 12%;        
        top: 20px;
        width: 77%;
    }
    .icon_menu{
        font-size: 35px !important;
        margin-left: 1px !important;
    }
    .open-menu{
        color: rgb(0,113,186);
        font-size: 40px;
        padding-left: 0px;
        top: 1px;
    }  
    .open-menu span{
        float: left;
        margin-left: 30px;
        margin-top: 10px;
    }
    
     /* left menu */
    
    .sidebar_avail {
        display: none;
        margin-top: 60px;
        width: 100% !important
    }
    
    .sidebar_avail ul li a{            
        height: 100%;
        margin: 0 auto;
        width: 50%
    }
    
    .sidebar-menu .nav li {
        height: 130px;
        text-align: center;
        width: 50%
    }           
    
    .sidebar-menu .nav li .text-menu {                    
        bottom: 24px;            
        left: 0;
        position: absolute;
        right: 0
    }
    
    .sidebar ul.nav.nav-sidebar li a i {
        font-size: 60px !important;
        margin-top: 9%;
    }
    
    
    /* main container avail  */
    
    .main_avail{
        margin: 0;
        padding: 95px 10px 0 10px !important;
    }
    
   .indicator_avail{
       height: 55px !important;
        margin-bottom: 10px
    }
    .indicator{
        left: 5px;
        padding-left: 5px;
    }
    .icon_dashboard {
        height: 30px;
        width: 30px;
    }
    .div_left_indicator{
        font-size: 27px;
    }
    .div_right_indicator{
        font-size: 10px;
        margin-left: -3px;
        width: 67%;
    }
    .number_indicator {
        font-size: 15px;
    }
    .div_library{
        margin-bottom: 10px
    }
    
    /*panels tasks*/
    #ul_admin_tasks, #ul_library_shared, #ul_library_avail{
        display: flex;
        height: 115px;
        margin-left: 7px;
        overflow-x: scroll;
        width: 96%;
    }
    .li_task{
        display: inline-table;
        margin-left: 1%;
        margin-right: 1%;
        padding: 9px !important;
        width: 190px;
    }
    .task_name{
        font-size: 15px;
    }
    .pager{
        margin: 0px 0px 20px 0px;
    }
    
    /* Learners list */
    
    .main_avail .learner-box .div_img_user .avatar_user{
        margin: 0 auto
    }
    
    /* nav tabs*/
    .nav-tabs>li a{
        font-size: 70%
    }
    
    /*list learners*/
    .learner-box {
        padding: 10px;
    }
    .search_learner{
        margin-left: 0px;
        margin-right: 0px;
        width: 47%;
    }
    #search_manager_btn, #search_facilitator_btn, #search_learner_btn{
        width: 95%
    }
    li{
        padding: 0px !important;
    }
    /* Profile detail */
    .panel-detail {
        padding: 10px 10px 30px 10px !important;
    }
    .panel-heading h2 {
        font-size: 20px;
    }
    .menu_learner{
        padding-top: 10px;
        width: 100%;
    }
    .name_profile{
        font-size: 15px;
    }
    #name_profile_detail, #name_profile_facilitator, #name_profile_schedule, #name_profile_user{
        margin-top: -26px;
    }
    #name_profile_assessment{
        float: none;
    }
    .div_details_profile{
       min-height: 415px;
       padding: 20px 0px !important;
    }   
    
    .div_details_profile img{
        margin: 0 auto;
        margin-bottom: 10px;
        width: 82%;
    }
    
    .div_details_profile  select{
        max-width: 100px
    }
    .div_function .div_left1, .div_function .div_left2, .div_function .div_left3, .div_function .div_left4 {
        padding-left: 4%;
        padding-top: 2%;
    }
    .div_function .div_left1 .circle1, .div_function .div_left2 .circle2, .div_function .div_left3 .circle3, .div_function .div_left4 .circle4 {
        margin-left: 0%;
    }
    .div_function .div_right1 .description_function, .div_function .div_right2 .description_function, .div_function .div_right3 .description_function, .div_function .div_right4 .description_function {
        font-size: 13px;
        letter-spacing: 1px;
        padding: 24px 5px 23px 16px;
    }
    .description_function img {
        margin-top: -7px !important;
    }
    .div_function {
        height: 88px;
    }
    /*List tasks*/
    .div-content-task {
        padding: 10px;
    }
    .div_task{
        font-size: 12px;
        height: 395px;       
    }
    .div_task .data_task h2{
        font-size: 15px;
    }

    .btn_close{
        right: 10px;
        top: 9px;
    }
    .icon-list-task {
        max-width: 38px;
    }
    .div_task .icons_task {
        margin-left: -5px;
    }
    .div-no-users{
        padding: 11px 30px;
    }
    .div-no-users .no_users_message1{
        font-size: 20px;
    }
    .div-no-users .no_users_message2{
        font-size: 15px;
    }
    .div-no-users img{
        width: 100px;
    }
    .div-no-users a{
        padding: 11px 30px;
    }
    /* Facilitator schedule */
    
    .panel-body{
        padding: 0
    }
    
    .panel-body .schedule-tabs li{
        float: left;
        padding-left: 0;
        padding-right: 0
    }
    
    /*tables*/
    .table-responsive{
        padding: 20px 0px;
    }
    /*tabs*/
    .nav-tabs>li>a {
        padding: 0px;
    }
    .nav-tabs>li {
        font-size: 10px;
    }
    .wizard-type2>.nav-tabs>li {
        height: 53px;
    }
    .wizard-type2>.nav-tabs>li>a {
        top: 15%;
    }
    /*Assessment task*/
    #table-assessment{
        padding: 0px;
    }
    .div-panel-assessment {
        padding: 0px 5%;
    }
    .panel-assessment{
        padding: 10px;
    }
    /*Modal schedule*/
    .modal-backdrop {
        z-index: 0;
    }
    .modal-date-assessment {
        width: 300px;
        left: 6px;
    }
    #scheduleForm{
        top: 70px;
    }
    #datepicker{
        font-size: 10px;
        margin-left: 6%;
    }
    /*Modal steps*/
    .modal-steps {
        margin-top: 100px;
        -webkit-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        -moz-box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
        box-shadow: 1px 1px 1px 1px rgba(198,198,198,1);
    }
    .icon_step{
        padding-left: 25%;
    }
    .icon_step a img{
        width: 50px;
    }
    
    /*Forms design*/
    .form-group:not(.has-feedback) input:not(.btn), .form-group select, .form-group textArea, .form-organization input, .containerSwitch {
        float: none;
        height: 25px;
        width: 100% !important;
    }
    .bootstrap-switch
    {
        height: 100%;
    }
    .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label
    {
        padding: 2px 12px !important;
    }
    .form-group:not(.has-feedback) label {
        font-size: 95%;
    }
    .form-control {
        font-size: 12px;
        line-height: 1.1;
        padding: 2px 6px;
    }
    .text-area-avail{
        height: 55px !important;
    }
    .simple-tab{
        top: 45% !important;
    }
    .panel-default .panel-body-list {
        padding: 10px;
    }
    .pagination li{
        padding: 0px;
    }
    .navigate{
        display: none;
    }
    .btn_select{
        right: 9px;
        top: 9px;
    }
    .div-next span, .div-back span{
        padding: 8px 39%;
    }
    .text-report{
        font-size: 20px;
        padding: 10px;
    }
    .ul_graphs li {
        padding: 10px !important;
    }
    .panel-heading-month {
        font-size: 17px;
    }
    .icon_show_dates{
        font-size: 25px !important;
        margin-right: 8px;
    }
    .date_report_left{
        border-right: none;
    }
    #preview_report, #download_report {
        font-size: 20px;
        margin-bottom: 15px;
        padding: 13px 26px 2px 27px;
    }
    #preview_report i, #download_report i {
        font-size: 32px;
    }
    .name_learner_report{
        margin-top: -25px;
    }
    .div_title_month {
        left: 0px;
    }
    .panel-heading-month{
        padding: 10px;
        text-align: center;
    }
    .panel-month{
        padding: 19px 3px;
    }
    .icon_display_month{
        font-size: 20px !important;
        margin-top: -4px;
    }
    .label-data{
        font-size: 20px;
        padding: 0px 0px 15px 0px;
    }
    .btn-switch-form{
        float: initial;
    }
    .align-right{
        float: left;
    }
    #external-events{
        height: initial;
        margin-top: 20px;
        overflow: unset;
    }
    .div_img_step audio {
        width: 90%;
    }
    #img-audio-step {
        height: auto !important;
        width: 90% !important;
    }
}


@media only screen 
and (max-device-width: 767px)
and (min-device-width : 320px){

    .row-horizontal .stripe-date, #cvc-stripe{
        width: 25%;
        text-align: center;
    }
}