/* Large desktop */
.mobShow {
    display: none;
}
.mobHide {
    display: block;
}
@media (min-width: 1200px) {
    .container,
    #doc4,
    #fullscreenContainer{
        width: 970px;
    }

    /* student search */
    .studentSearch .x-panel-mc .x-form,
    .studentSearch .x-form-field-wrap ,
    .studentSearch .x-table-layout{
        width: 706px !important;
    }
    .studentSearch .x-form-field-wrap .x-form-trigger{
        height: 27px;
        background-color: #ccc;
    }
    .keyboard_wrap span.icon{
        right:-10px;
    }
    .keyboard_popup {
        right:-35px;
        top: 40px;
    }
    #searchStudentDiv #myStudentSearch .x-form-text {
        margin-left: 10px;
        padding-right:30px !important;
        width:96% !important;
    }
}

/* Resolved issue with sliding icon on login page */
@media (min-width: 940px) and (max-width:1450px){
    .mediaFooter{
        padding:0 !important;
    }
}

@media (min-width:979px) and (max-width: 1199px){
    /* student search */
    .studentSearch .x-panel-mc .x-form,
    .studentSearch .x-form-field-wrap ,
    .studentSearch .x-table-layout{
        width: 706px !important;
    }
    .studentSearch .x-form-field-wrap .x-form-trigger{
        height: 27px;
        background-color: #ccc;
    }
    .keyboard_wrap span.icon{
        right:-10px;
    }
    .keyboard_popup {
        right:-35px;
        top: 40px;
    }
    #searchStudentDiv #myStudentSearch .x-form-text {
        margin-left: 10px;
        padding-right:30px !important;
        width:96% !important;
    }
}

/* Portrait tablet to landscape and desktop */
    @media (max-width: 979px) {
        .container,
    #doc4,
    #fullscreenContainer{
        width: 720px;
        min-width: 700px;
    }

    #ft #footer {
        width: auto;
        padding: 10px;
    }



    /* student search */
    .studentSearch .x-panel-mc .x-form,
    .studentSearch .x-form-field-wrap ,
    .studentSearch .x-table-layout{
        width: 100% !important;
    }
    .studentSearch .x-form-field-wrap .x-form-trigger{
        height: 27px;
        background-color: #ccc;
    }
    #searchStudentDiv #myStudentSearch .x-form-text {
        margin-left: 10px;
        padding-right: 30px !important;
        width: 89% !important;
    }
    .keyboard_wrap span.icon{
        right: 5px;
    }
    .keyboard_popup {
        top: 37px;
        right:-40px;
    }

    /*** magnus dialer ****/
    #magnusDialer a {
        width: 180px !important;
    }

    .custom-tracker .userDetails .userInfo  {
        float: left;
        margin-left: 10px;
        width: auto;
        min-height: 65px;
    }
    .customTrackertableWrap{
        overflow-x: scroll;
        border: 1px solid #f2f2f2;
    }
    .customTrackertableWrap table.complete_item_tablesorter {
        width: 900px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    form .btnLogin {
        left: 0%;
    }
    form .form-group {
        left: 0%;
        width: 100%;
    }
    .mobShow {
        display: block;
    }
    .mobHide,
    .topHeader .welcomeText {
        display: none;
    }
    #logo.headerLogo {
        width: 40px;
        margin: 0 5px 0 0;
    }
    #hd.topHeader {
        padding: 10px;
        margin: 0;
    }
    #user_panel ul li > a{
        text-decoration: none;
        font-size: 14px;
        line-height: 18px;
        margin-top: 5px;
    }
    .needHelpButton {
        border: none;
        background: transparent;
        box-shadow: none;
        display: inline-block;
        font-size: 12px;
        line-height: 14px;
        margin-top: 5px;
        float: right;
        width: auto;
    }
    .needHelpButton:hover {
        background: transparent;
    }


    /*** login screen ***/
    .loginBox {
        max-width: 320px;
        margin: 0 auto;
    }


    .loginBox .logo img {
        width: 150px;
    }
    .loginBox .btnLogin,
    .loginBox .btn-link{
        width: 100%;
    }
    .loginBox .panel-body,
    .panel-footer{
        padding: 10px;
    }
    .loginBox .panel-footer {
        text-align: center;
    }
    .loginBox .panel-footer .footerLink {
        display: inline-block;
        padding: 0;
        width: 60px;
        vertical-align: top;
        margin: 0 4px;
    }
    .loginBox .panel-footer .footerLink img {
        max-width: 100%;
    }
    .loginBox .panel-footer .truste{
        width: 80px;
    }
    /*** end of login screen ***/

    .mediaFooter {
        clear:both;
        width:320px;
        margin: 10px auto;
        height:50px;
        padding:0;
    }
    .mediaFooter .footerLogo, .mediaFooter .bigFooterLogo {
        cleart:left;
        float:left;
        display:block;
        text-align:center;
        margin: 2px auto;
        height:55px;
        width:320px;
    } .mediaFooter .bigFooterLogo {
          height: 50px;
      }

    /*** single page fullscreen container layout ***/
    .container,
    #doc4    {
        min-width: 100%;
        width: 100%;
    }
    #fullscreenContainer{
        min-width: 90%;
        width: auto;
        border: none;
    }
    #fullscreenContainer .questions,
    #fullscreenContainer .step{
        width: auto;
        padding: 10px;
    }
    #fullscreenContainer .header_bar {
        padding: 10px 0 10px 10px;
        margin-bottom: 0;
    }
    #fullscreenContainer .header_bar h1{
        font-size: 15px;
        display: block;
        float: none;
        width: auto;
    }
    #fullscreenContainer .header_bar h1 i {
        float: left;
    }
    #fullscreenContainer .header_bar h1 span {
        float: none;
        margin-left: 25px;
        display: block;
    }
    #fullscreenContainer .questions h1{
        font-size: 16px;
        margin-top: 0;
    }
    #fullscreenContainer #messages {
        width: auto !important;
    }
    .fullScreenContainer .fullScreenHeader {
        position: relative;
        width: 100%;
        margin-bottom: 20px;
    }
    .fullScreenContainer .fullScreenHeader a   {
        line-height: 30px;
        box-shadow: none;
        border-radius: 0;
        border: none;
        width: 84px;
        height: 100%;
    }
    .fullScreenContainer .fullScreenHeader .closeBtnWrap {
        top: 0;
        bottom: 0;
    }
    .fullScreenContainer h1{
        font-size: 15px;
    }
    .fullScreenContainer h1 i {
        display: none;
    }
    .fullScreenContainer .header_bar h1 {
        font-size: 16px;
    }

    /*** end of single page layout **/


    /** header **/
    .frontDeskOuter #nav_header {
        height: auto;
        border: none !important;
        border-radius: 0;
    }
    .frontDeskOuter #nav_header #customTrackers,
    .nav_header .customTrackerTitle{
        font-size: 15px;
        padding-left: 5px;
    }
    .frontDeskOuter .frontDeskTitle{
        padding-left: 10px;
    }
    .frontDeskOuter .nav_header .customTrackerIcon {
        display: none;
    }

    /** child list **/
    #nav-main {
        padding: 20px !important;
    }
    .parentFrontDesk{
        margin-bottom: 0;
    }
    .childBox.frontDeskList {
        height: auto;
        margin-top: 0;
        border-top: 0;
        padding: 0 0 30px 0;
    }
    #nav_main.frontDeskWrapper {
        padding: 10px 10px 0 !important;
        border: none !important;
        min-height: 100px;
    }
    .frontDeskWrapper .parentFrontDesk tr td {
        padding: 20px 10px 0;
        border-bottom: 1px solid #ccc ;
    }
    .frontDeskWrapper .parentFrontDesk tr:first-child td{
        border-bottom: 0;
    }
    .frontDeskWrapper .userInfoWrap {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        margin-left: 0 !important;
    }
    .frontDeskWrapper #user_details div.icon{
        float: none;
        width: 75px;
        display: inline-block;
        padding-right: 0;
        position: relative;
    }
    .frontDeskWrapper #user_details .userInfo{
        float: none;
    }
    .userInfo .label{
        padding: 5px 10px;
        margin: 0 !important;
    }
    .frontDeskWrapper #user_details div.icon .todo_flag{
        position: absolute;
        left: -4px;
        margin-right: 0;
    }
    .frontDeskWrapper .apps {
        padding: 0;
        display: block;
        margin: 0;
        border: none;
        float: none;
        text-align: left;
        display: block;
    }
    .frontDeskWrapper .apps .parent_app_icon{
        display: inline-block;
        padding: 15px 8px;
        margin: 0;
    }
    .frontDeskWrapper .btnWrap{
        text-align: center;
    }
    .frontDeskWrapper .btnWrap .btnPrint {
        padding: 10px 25px;
    }
    .frontDeskWrapper .apps img{
        height: 25px !important;
    }
    .frontDeskWrapper .apps .parent_app_icon:first-child{
        margin-left: 0;
    }
    .frontDeskList .userNote {
        width: auto;
        text-align: center;
        padding: 0 50px;
        margin-bottom: 15px;
        display: block;
    }
    .frontDeskList .frontDeskActionCol {
        width: auto;
        text-align: right;
        display: block;
    }
    .frontDeskList .frontDeskActionCol a.button {
        padding: 9px 10px;
        display: block;
    }
    .frontDeskList .moreApps{
        margin-top: 10px;
        display: none;
    }

    /* magnus dialer */
    #magnusDialer .magnusDialerAdmin {
        text-align: center;
    }
    #magnusDialer .magnusDialerAdmin a {
        display: inline-block;
        float: none;
    }

    /**** custom tracker  health tracker**/
    .custom-tracker{
        padding-left: 0;
    }
    .custom-tracker .userDetails {
        text-align: center;
    }
    .custom-tracker .roundeddiv{
        float: left;
        margin-top: 10px;
        padding: 5px;
        border: 0;
        box-shadow: none;
        vertical-align: top;
    }
    .custom-tracker .userDetails .userInfo {
        float: none;
        margin: 0;
    }
    .userDetails .button{
        padding: 9px;
    }
    .custom-tracker .userDetails .dueDate {
        float: none;
        width: 100px !important;
        padding-top: 15px;
        display: inline-block !important;
        margin-right: 0;
    }
    .custom-tracker .userDetails .trakerSummary {
        float: none;
        max-width: 150px !important;
    }
    .userDetails .trakerSummary #p1,
    .userDetails .trakerSummary .x-progress-wrap{
        width: auto !important;
    }
    .userDetails .userInfo  div {
        margin-bottom: 10px;
    }
    .roundDivWrap  {
        float: none;
        text-align: center;
    }


    /**** footer ******/
    #footer .copyright{
        width: 45%;
        float: left;
        text-align: left;
    }
    .copyright .text {
        display: block;
        margin-top: 10px;
    }
    #footer .copyright{
        float: left;
    }
    #footer #links {
        text-align: right;
        float: right;
        margin-top: 0;
        width: 50%;
    }
    #footer #links li.trusteIcon{
        display: block;
        margin-bottom: 10px;
    }
    #footer #links li.studentPrivacyPledge{
        display: block;
        margin-bottom: 10px;
    }
    /*** end of footer **/


    .container,
    .customTrackertableWrap {
        width: auto;
    }
    .customTableList{
        border: none;
    }
    .customTableList li{
        display: block;
        border-bottom: 1px solid #e6e6e6;
        padding: 0;
    }

    .customTableList li .tCell .tCellLabel{
        margin-bottom: 10px;
        padding: 2px;
        background: #f2f2f2;
    }
     .customTableList li.list-head{
        display: none;
    }
    .customTableList li .tCell {
        float: none;
        width: auto;
        display: block;
        border: none;
        padding: 5px 5px 5px 130px;
        position: relative;
        min-height: 40px;
        width: auto !important;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
    }
    .customTableList li .tCell .tCellLabel{
        display: block;
        position: absolute;
        width: 120px;
        top: 0;
        bottom: 0;
        left: 0;
        margin-bottom: 0;
        padding: 8px 0 0 5px;
    }
    .customTableList li .requirement.mobShow {
        display: block;
    }
    .customTableList li .requirement.mobHide {
        display: none;
    }
    .customTableList li .todo{
       border-top: 1px solid #e6e6e6;
        min-height: 16px;
    }
    .customTableList li .todo img{
        width: 40px;
        margin-top: 0 !important;
        top: auto;
    }
    .customTableList li .requirement.reqTitle{
        padding: 25px 20px 10px;
        text-align: center;
        border: none;
    }
    .fullScreenContainer .boxContainer{
        height: auto;
        margin-top: 0;
        border: 0;
        border-radius: 0;
    }
    .fullScreenContainer .boxContainer .boxElement {
        position: relative;
        border-bottom:  1px solid #ccc;
        border-right: 0;
        padding-bottom: 10px;
        width: 310px;
        margin: 0 auto;
    }
    .fullScreenContainer .boxContainer .boxElement .bottomDetails{
        position: relative;
    }


    /*** print form **/
    .printForm form input[type=checkbox] {
        float: left;
    }
    .printForm form label {
        float: none !important;
    }
    /********* sign ESD page ***/
    .signEsd {
        width: 100%;
    }
    .signEsd iframe {
        width: 100% !important;
    }


    /*** upload file ***/
    .uploadWrapper ul li {
        text-align: left;
        font-size: 14px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .uploadWrapper .step {
        margin: 0 auto;
    }
    .uploadWrapper h2 {
        margin-top: 0;
    }
    .uploadWrapper label.customFileInput  {
        height: 30px;
        padding: 0;
        margin-bottom: 10px;
        display: block;
        position: relative;
        line-height: 30px;
        color: #fef4e9 !important;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top, #faa51a, #f47a20);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .uploadWrapper label.customFileInput:hover{
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top, #f88e11, #f06015);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }
    .customFileInput span.textLabel {
        display: block;
    }
    .uploadWrapper .blockUIUpload{
        display: none;
    }
    label.customFileInput input {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .uploadFileList{
        margin: 10px 0;
    }
    .uploadFileList li {
        list-style: none;
        border-bottom: 1px solid #ccc;
    }
    .uploadFileList li .dispCell{
        padding: 5px;
        vertical-align: middle;
        border-bottom: 1px solid #f2f2f2;
    }
    .uploadFileList li:first-child .dispCell{
        border-top: 1px solid #f2f2f2;
    }
    .uploadFileList li .uploadedImage {
        width: 50px;
    }
    .uploadFileList li .uploadedImage img {
        max-width: 100%;
        height: 40px;
        border: 1px solid #f2f2f2;
    }
    .uploadFileList li:first-child .tCell {
        border-top: 1px solid #f2f2f2;
    }
    .uploadFileList  {
        display: table !important;
    }

    .blockUI.blockPage {
        width: 300px !important;
        left: 50% !important;
        margin-left: -150px !important;
    }

    /******* tutorial poup ***/
    #TB_window {
        width: 90% !important;
        left: auto !important;
        margin-left: 4% !important;
        z-index: 99999;
    }
    #TB_window iframe {
        width: 100% !important;
    }
    #TB_window iframe  a.optionsBox {
        padding-left: 55px !important;
    }
    #TB_window iframe h1 {
        margin-top: 15px !important;
    }
    #media img {
        max-width: 100%;
        width: 100%;
    }
    #media .submitBtn,
    #media .checkboxWrap{
        width: auto !important;
        margin: 0 !important;
    }

    #user_details div.icon .avatar:hover .avatar_thumbnail {
        width: 64px !important;
        height: 64px !important;
        background: white;
        position: relative !important;
        padding: 0px !important;
    }

    #user_details div.icon .avatar:hover {
        position: relative !important;
    }

    #user_details div.icon .avatar:hover .avatar_edit {
        display: none !important;
    }
}

@media (max-width:620px) {
    #searchStudentDiv #myStudentSearch .x-form-text {
        width: 86% !important;
    }
}

@media (min-width:621px) and (max-width:690px) {
    #searchStudentDiv #myStudentSearch .x-form-text {
        width: 88% !important;
    }
}

@media (min-width:381px) and (max-width:420px) {
    #searchStudentDiv #myStudentSearch .x-form-text {
        width: 79% !important;
    }
}

@media (min-width:421px) and (max-width:500px) {
    #searchStudentDiv #myStudentSearch .x-form-text {
        width: 82% !important;
    }
}

@media (max-width:380px) {
    #searchStudentDiv #myStudentSearch .x-form-text {
        width: 75% !important;
    }
}

@media (max-width:395px) {
    .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }
}