/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    .custom-buttons {
        width: 75px;
    }
}
@media only screen and (max-width: 1199px) {
    .fullname {
    font-size:70%;
    }
    .afilter-tooltip{
                width:150px !important;
            }
}
 @media (min-width: 991px) and (max-width : 1200px) {
    .description {
        min-height: 185px;
    }
    .discount-col {
    padding-left: 130px;
    }
    .grand-total-col {
    position: relative;
    left: 38px;
}
}
 @media only screen and (max-width : 991px) {
    #card-logo {
    margin-top:0px;
    }
    span.k-widget.k-datepicker.k-header.date.newValues.text-box.single-line {
      width: 96%;
}
    .valueChanged, .newValues textarea{
        width:96%;
    }
    .customEditValues, span.k-widget.k-combobox.k-header.form-control.custom-dropdown.newValues {
        width:96%;
    }
    
}
@media only screen and (min-width : 768px) and (max-width : 992px) {
    .k-grid td {
        font-size:13px;
     }
}
@media (min-width: 768px){
   .nopadding {
padding:0px;
margin:0px;
}
}
 @media only screen and (max-width : 767px) {
/* .header .logo {
        background: url("/ui/apps/sites/aspdp/images/doe-logo-h.png") center center no-repeat;   
    }  */
}

 @media (max-width: 767px) {

 .header .logo {
    text-align:center;
 }
 .header .app-title {
    text-align: center;
 }
 .app-name{ float:none;}
 .navbar-default .navbar-right {
     
    right: 90px;   
 }
 .k-menu .k-item {
        width: 100%;
    }

    .k-menu .k-menu-group {
        width: 100%;
    }
       #main-menubar .pull-right{
     float:left !important;
     width:100% !important;
 }
    .navbar-default .container {
        padding:0 15px;

    }
   .k-animation-container{
            width: 99% !important;
    
    overflow: hidden;
    display: block;
    z-index: 10002;
    top: 48px;
    left: 0px;
    position: absolute !important;
    }
    .navbar-nav {
        margin: 0;
    }
   .navbar-header{
       box-shadow: 1px 3px 5px #888888;
   }
   #main-menubar .k-menu .k-item, .k-widget.k-menu-horizontal > .k-item {
  border-bottom: 2px solid #E0E0E0  !important; 
    }
     #main-menubar .k-menu .k-item:last-child {
  border-bottom: none !important; 
    }
    #main-menubar .k-state-hover{
        background-color:#dedede !important;
    }

    .carousel-caption h3 {
        font-size: 20px;
        line-height: 20px;
    }
    .carousel-caption {
        padding-top: 0;
        padding-bottom: 0;
    }

}
    
/*
    CSS for Telirik Grid Starts
    
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
@media only screen and (max-width : 480px) {
       

    table, thead, tbody, th, td, tr {
        display: block;
    }


        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        border: 1px solid #ccc;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

        td:before {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }
     .afilter-tooltip{
                width:110px !important;
            }

    .carousel-caption {
        padding-top:0;
        padding-bottom:0;
    }
    .carousel-caption h3{
        font-size:18px;
        line-height: 13px;
    }
    .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
        top:43%;
    }

}
@media only screen and (max-width : 320px) {
    a.custom-tooltip:hover span {
    width:210px;
  }
    .registration-label{
        font-size:14px;
    }
    .register-radio {
    margin-right: 14px;
}
}
@media (max-width: 767px) {
           /* .navbar-header{
             box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
            }  */
            .k-menu .k-animation-container {
                position: relative !important;
                top: 0 !important;
                left: 0 !important;
            }

            .navbar-collapse {
                padding-right: 0;
                padding-left: 0;
                max-height: 100%;
            }

            .k-menu .k-menu-group {
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
            .print-transcript{
            text-align:left;
            }
           
        }
@media only screen and (max-width: 920px) {
    .k-widget.k-window {
        width: 500px !important;
    }
    .custom-delete{ display:block;}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 479px) {
    .logo{
        width: 100%;
        text-align: center;
    }
    .app-name{
        float: left;
        width: 100%;
        text-align: center;
    }
    #app-title{
        text-align: center;
    }
    .custom-coursesearch{
    width: 100% !important;
    margin-bottom: 15px !important;

}
input#CourseName {
    margin-bottom:0 !important;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    .k-widget.k-window {
    width: 316px !important;
}
    .tr-width td{
        width:100%;
    }
   
      
}
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
        .k-widget.k-window {
    width: 316px !important;
}
      
}
@media only screen and (max-width: 667px) {
    .export-btn{
            float: left !important;
            margin-top: 5px;
        }
}
@media only screen and (max-width: 500px) {
    .k-widget.k-window {
        width: 316px !important;
    }
   
}
@media only screen and (max-width: 596px) {
    span.k-widget.k-datepicker.k-header.date.newValues.text-box.single-line {
      width: 94%;
}
    .valueChanged, .newValues textarea{
        width:93%;
    }

}