.nav-wrapper {
    background: #fff;
}
@media screen and (max-width: 676px) {
    i.prefix {
        display: none;
    }

    #enrollment-tabs {
        display: none;
    }

    .fieldset-1{
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    header .brand-logo img{
        width: 140px;
        height: 55px;
    }

    #tab-header{
        display: block !important;
    }

    #tab-1-submit {  margin-bottom: 20px; }
    .mob-college { margin-top: 30px; }
}
@media  screen and (min-width: 300px) and (max-width:500px) {
    header .brand-logo img {
        width: auto;
        height: 52px !important;
    }
}

.dataTables_processing {
      z-index: 900 !important;
    }

.add-new-link, .cancel-new-link, .remove-new-link{
    float: right;
}

.sub-section{
    display: inline-block;
    width: 100%;
}

.heading3{
    width: 100%;
    font-weight: bold;
    color: #51A2F9;
}

.view-lab {
    margin: 0 0 10px 4%; 
    display: inline-block;
}

.view-lab-right {
    margin: 0 4% 10px 0; 
    display: inline-block;
}

.stud_disc_doc th { font-weight: 600; }

.form-loader-wrapper {
    width: 0;
}

.form-loader-img {
    width: 58%;
    margin-top: 5px;
}

#divLoading
{
    display : none;
    text-align: center;
}
#divLoading.show
{
    display : block;
    position : fixed;
    z-index: 100;
    /*background-image : url('/images/jksc_wave.gif');*/
    background-color:#f0f1f4;
    opacity : 0.75;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}
#loadinggif.show
{
    left : 50%;
    top : 50%;
    position : absolute;
    z-index : 101;
    width : 32px;
    height : 32px;
    margin-left : -16px;
    margin-top : -16px;
}

.sms-red { background-color: red; width: 100%; height: 2px; }
.sms-green { background-color: #00E676; width: 100%; height: 2px; }

.student_cnt_container span { 
    font-weight: 600;
    color: #005F96;
    font-size: 16px;
 }

.device_info span { 
    font-weight: 600;
    color: #005F96;
    font-size: 16px;
 }

.alt_student_colg { display: none; }

.report-download{
    position: absolute;
    top: 10px;
    z-index: 100;
}

#tab-header{
    display: none;
}

.fs-title-1{
    font-size: 19px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fieldset-1 {
    background: white;
     border: 0 none;
     border-radius: 3px;
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
     padding: 20px 30px;
     box-sizing: border-box;
     width: 90%;
     margin: 0 5%;
     
     /*stacking fieldsets above each other*/
     position: relative;
}

.enrollment-btn {
    background: #27AE60 !important;
}

.tabs {
    background-color: #51A2F9;
}

.tabs .tab a { color: #fff; }

.tabs .tab a.active {
    background-color: #fff;
    color: #000;
}

.collapsible-body {
    padding: 0 1%;
}

/*form styles*/
  #enrollment-tab4 {
    background-color: #51A2F9; 
  }

  #enrollment-tab4 {
     width: 100%;
     margin: 50px auto;
     /*text-align: center;*/
     position: relative;
  }
  fieldset.payment-step {
     background: white;
     border: 0 none;
     border-radius: 3px;
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
     padding: 20px 30px;
     box-sizing: border-box;
     width: 96%;
     margin: 0 2%;
     
     /*stacking fieldsets above each other*/
     position: relative;
  }
  /*Hide all except first fieldset*/
  #enrollment-tab4 fieldset:not(:first-of-type) {
     display: none;
  }
  /*inputs*/
  /*#enrollment-tab4 input, #enrollment-tab4 textarea {
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 3px;
     margin-bottom: 10px;
     width: 100%;
     box-sizing: border-box;
     font-family: montserrat;
     color: #2C3E50;
     font-size: 13px;
  }*/
  /*buttons*/
  #enrollment-tab4 .action-button {
     width: 100px;
     background: #27AE60;
     font-weight: bold;
     color: white;
     border: 0 none;
     border-radius: 1px;
     cursor: pointer;
     padding: 10px 5px;
     margin: 10px 5px;
  }
  #enrollment-tab4 .action-button:hover, #enrollment-tab4 .action-button:focus {
     box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
  }
  /*headings*/
  .fs-title {
     font-size: 15px;
     text-transform: uppercase;
     color: #2C3E50;
     margin-bottom: 10px;
  }
  .fs-subtitle {
     font-weight: normal;
     font-size: 13px;
     color: #666;
     margin-bottom: 20px;
  }
  /*fs-progressbar*/
  #fs-progressbar {
     margin-bottom: 30px;
     overflow: hidden;
     /*CSS counters to number the steps*/
     counter-reset: step;
  }
  #fs-progressbar li {
     list-style-type: none;
     color: white;
     text-transform: uppercase;
     font-size: 9px;
     width: 33.33%;
     float: left;
     position: relative;
  }
  #fs-progressbar li:before {
     content: counter(step);
     counter-increment: step;
     width: 20px;
     line-height: 20px;
     display: block;
     font-size: 10px;
     color: #333;
     background: white;
     border-radius: 3px;
     margin: 0 auto 5px auto;
  }
  /*fs-progressbar connectors*/
  #fs-progressbar li:after {
     content: '';
     width: 96%;
     height: 2px;
     background: white;
     position: absolute;
     left: -48%;
     top: 9px;
     z-index: 0; /*put it behind the numbers*/
  }
  #fs-progressbar li:first-child:after {
     /*connector not needed before the first step*/
     content: none; 
  }
  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #fs-progressbar li.active:before,  #fs-progressbar li.active:after{
     background: #27AE60;
     color: white;
  }


#layouts-horizontal #main {
    padding: 0;
}

.cust-section {
        /* border: 0; */
    /* border-bottom: 1px dotted rgba(0,0,0,1.26); */
    padding: 24px 0;
    /* border-style: dotted; */
    /* margin: 28px 0; */
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 0px 6px 0 rgba(0,0,0,0.19) !important;
}

input[type=text][readonly="readonly"]{
    color: rgba(0,0,0,0.87);
}

input[type=text][readonly="readonly"]+label {
    color: #696969;
}

.md-radio {
  /*margin: 16px 0;*/
}
.md-radio.md-radio-inline {
    display: inline-block;
    min-height: 3rem;
    margin-bottom: 15px;
}
.md-radio input[type="radio"] {
  /*display: none;*/
}
.md-radio input[type="radio"]:checked + label:before {
    border-color: #337ab7;
    animation: ripple 0.2s linear forwards;
}
.md-radio input[type="radio"]:checked + label:after {
  transform: scale(1);
}
.md-radio label {
    display: inline-block;
    height: 20px !important;
    position: relative;
    padding: 0 30px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
}
.md-radio label:before, .md-radio label:after {
    position: absolute;
    content: '';
    border-radius: 50%;
    transition: all 0.3s ease;
    transition-property: transform, border-color;
}
.md-radio label:before {
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.54);
}
.md-radio label:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    transform: scale(0);
    background: #337ab7;
}

.cursor{
    cursor: pointer;
}

legend span{
    font-size: 22px;
    color: #1E90FF;
}

.fieldset{
    margin-top: 20px;
}

.script {
  font-family: "Seaweed Script";
  color: #9e9e9e;
  text-align: center;
  font-size: 24px;
  position: relative;
  margin:0;
  z-index: 0;
}

.script span {
  background-color: #fff;
  padding: 0 0.3em;
}
.script:before {
  content:"";
  display: block;
  position: absolute;
  z-index:-1;
  top: 50%;
  width: 100%;
  border-bottom: 1px solid #9e9e9e;
}

#archive .subheader {
    color: #9e9e9e;
    margin-top: 28px;
    margin-bottom: 30px;
    font-size: 18px;
    border-bottom: 2px solid #9e9e9e;
}   


.enrollment-progress li label{
   top: 100px;
   position: absolute;
   width: 100%;
   left: 0;
   line-height: 15px;
}

li.circles {
   width: 6em;
   height: 6em;
   text-align: center;
   line-height: 6em;
   border-radius: 6em;
   background: dodgerblue;
   margin: 0 1.5em;
   display: inline-block;
   color: white;
   position: relative;
   word-break: break-all;
}

li.circles::before{
   content: '';
   position: absolute;
   top: 3em;
   left: -3.3em;
   width: 3.5em;
   height: .2em;
   background: dodgerblue;
   z-index: 0;
}

li.circles:first-child::before {
   display: none;
}

.active ~ li.circles {
   background: lightblue;
}

.active ~ li.circles::before {
   background: lightblue;
}

.modal {
    display: none;
    position: fixed;
    left: -6px;
    right: 0;
    background-color: #fafafa;
    padding: 0;
    max-height: 98% !important;
    width: 96% !important;
    margin: auto !important;
    overflow-y: auto;
    border-radius: 2px;
    will-change: top, opacity;
    top: 8px !important;
}

.modal.modal-fixed-footer {
    padding: 0;
    height: 98%; 
}

.select2-results__option {
    font-size: 16px !important;
    color: #ff4081 !important;
    display: block;
    line-height: 22px;
    padding: 6.5px 16px;
}

.disc-clone{
    padding: 0 5px;
}

.select2-container+label {
    position: absolute;
   /* top: -14px;*/
    font-size: 0.8rem;
}

.input-field .prefix + input + label + .error, .input-field .prefix + .select-wrapper + label + .error, .input-field .prefix + select + span + label + .error, .input-field .prefix + input + input + label + .error {
    margin-left: 3rem;
}

div.error {
    color: red;
    /*margin-top: -15px;*/
    padding: 0;
    font-size: 0.9em;
}

.button-container{  height: 3rem; margin-top: 1rem; }

.s2-5 { width: 22% !important; }
.w10 { width: 10% !important; }
.w12 { width: 12% !important; }
.w20 { width: 20% !important; }
.w86 { width: 86% !important; }
.w5 { width: 5% !important; }

.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.ml-20 { margin-left: 20px; }
.mt-30 { margin-top: 30px; }

.no-padding { padding: 0 }

.input-field .prefix + .select2-hidden-accessible + .select2-container--default {
    margin-left: 3rem;
    width: 92% !important;
    width: calc(100% - 3rem);
}

h6.question{
    margin: 0px !important;
    font-weight: 500 !important;
}

.input-field .prefix + .select-wrapper {
    margin-left: 3rem;
    /*width: 92% !important;*/
    width: calc(100% - 3rem);
}

.select2-container { border: none; }

.select2-selection--multiple {
    min-height: 3rem !important;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    background-color: transparent;
    border: none !important;
    border-bottom: 1px solid #9e9e9e !important;
    border-radius: 0;
    outline: none;
    min-height: 3rem;
    width: 100%;
    font-size: 1rem;
    /*margin: 0 0 15px 0;*/
    padding: 0;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    transition: all .3s;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #eeeeee; 
    color: white;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* height: 26px; */
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 45px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* height: 26px; */
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;

.select2-selection--multiple{
    height: 3em !important;
    border: none !important;
}

.side-nav .collapsible li a{
    width: 250px;
}

.profile-image-login{
    width: 200px;
}

.custom-label{
    float: left;
    margin-left: 0.5em;
}

.radio-label{ font-size: 1rem; }

.def-label { color: #000000; }



ul {
    margin: 0;
    padding: 0;
}

:focus {
    outline: none;
}

:disabled {
    background-color: transparent;
}



/**
 * Multiple Select2
 */



.select2-container--material {
    width: 100% !important;
    
    ::placeholder {
        color: inherit;
    }
    
    
    
    
    
    /**
     * Textbox
     */
    
    .select2-selection {
        /* @extend input */
        overflow: visible;
        
        font: inherit;
        
        touch-action: manipulation;
        
        margin: 0;
        line-height: inherit;
        border-radius: 0;
        
        box-sizing: inherit;
        
        /* @extend .form-control */
        display: block;
        
        width: 100%;
        color: #55595c;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        
        padding: .5rem 0 .6rem;
        font-size: 1rem;
        line-height: 1.5;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        margin-top: .2rem;
        margin-bottom: 1rem;
        
        /* @extend input[type=text] */
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #ccc;
        border-radius: 0;
        outline: 0;
        //height: 2.1rem;
        width: 100%;
        font-size: 1rem;
        box-shadow: none;
        transition: all .3s;
        
        min-height: 2.1rem;
        
        .select2-selection__rendered {
            padding-left: 0;
        }
    }
    
    .select2-selection--single {
        .select2-selection__rendered {
            float: left;
        }
        
        .select2-selection__arrow {
            float: right;
        }
    }
    
    .select2-selection--multiple {
        .select2-selection__rendered {
            width: 100%;
            
            li {
                list-style: none;
            }
        }
        
        /**
         * Multiple selected options
         */
        .select2-selection__choice {
            /* @extend .mdl-chip */
            height: 32px;
            //font-family: "Roboto","Helvetica","Arial",sans-serif;
            line-height: 32px;
            padding: 0 12px;
            border: 0;
            border-radius: 16px;
            background-color: #dedede;
            display: inline-block;
            color: rgba(0,0,0,.87);
            margin: 2px 0;
            font-size: 0;
            white-space: nowrap;
            
            /* @extend .mdl-chip__text */
            font-size: 13px;
            vertical-align: middle;
            display: inline-block;
            
            
            
            float: left;
            
            margin-right: 8px;
            margin-bottom: 4px;
        }
        
        /**
         * Multiple selected option clear button
         */
        .select2-selection__choice__remove {
            /* Hide default content */
            font-size: 0;
            
            opacity: 0.38;
            cursor: pointer;
            float: right;
            margin-top: 4px;
            margin-right: -6px;
            margin-left: 6px;
            
            transition: opacity;
            
            &::before {
                content: "cancel";
                
                /* @extend .material-icons */
                font-family: 'Material Icons';
                font-weight: normal;
                font-style: normal;
                font-size: 24px;
                line-height: 1;
                letter-spacing: normal;
                text-transform: none;
                display: inline-block;
                white-space: nowrap;
                word-wrap: normal;
                direction: ltr;
                -webkit-font-feature-settings: 'liga';
                -webkit-font-smoothing: antialiased;
                
                color: #000;
            }
            
            &:hover {
                opacity: 0.54;
            }
        }
    }
    
    .select2-search--inline {
        .select2-search__field {
            width: 100%;
            margin-top: 0;
            
            /* Match input[type=text] */
            height: 34px;
            line-height: 1;
        }
    }
    
    
    
    /**
     * Dropdown
     */
    
    .select2-dropdown {
        border: 0;
        
        .select2-search__field {
            min-height: 2.1rem;
            margin-bottom: 16px;
            border: 0;
            border-bottom: 1px solid #ccc;
            
            transition: all .3s;
            
            &:focus {
                border-bottom: 1px solid #4285f4;
                box-shadow: 0 1px 0 0 #4585f4;
            }
        }
    }
    
    .select2-results__options {
        /* @extend .zf-shadow-depth* */
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
        
        /* @extend .dropdown-content */
        background-color: #fff;
        margin: 0;
        //display: none;
        min-width: 100px;
        max-height: 650px;
        overflow-y: auto;
        //opacity: 0;
        //position: absolute;
        z-index: 999;
        will-change: width,height;
        
        /* @extend .dropdown-content inline styles */
        //position: absolute;
        //top: 0;
        //left: 0;
        //opacity: 1;
        //display: block;
        
        &--above {
            //top: 50px;
        }
        
        &--below {
            //top: -50px;
        }
    }
    
    
    
    /**
     * Options
     */
    
    .select2-results__option {
        /* @extend .dropdown-content li */
        cursor: pointer;
        
        clear: both;
        color: rgba(0,0,0,.87);
        line-height: 1.5rem;
        //width: 100%;
        text-align: left;
        text-transform: none;
        
        /* @extend .dropdown-content li>a, .dropdown-content li>span */
        font-size: 1.2rem;
        //color: #4285F4;
        display: block;
        padding: 1rem;
        
        /**
         * Disabled options
         */
        &[aria-disabled=true] {
            /* @extend .select-dropdown li.disabled */
            color: rgba(0,0,0,.3);
            background-color: transparent!important;
            cursor: context-menu;
            
            /* @extend .disabled */
            cursor: not-allowed;
        }
        
        /**
         * Selected option
         */
        &[aria-selected=true] {
            /* @extend .dropdown-content li:active, .dropdow-content li:hover */
            color: #4285f4;
            
            background-color: #eee;
        }
        
        /**
         * Active/hovered option
         */
        &--highlighted[aria-selected] {
            background-color: #ddd;
        }
    }
    
    
    
    /**
     * Focused textbox
     */
    
    &.select2-container--focus {
        .select2-selection {
            /* @extend input[type=text]:focus */
            border-bottom: 1px solid #4285f4;
            box-shadow: 0 1px 0 0 #4585f4;
        }
    }
    
    
    
    /**
     * Disabled textbox
     */
    
    &.select2-container--disabled {
        .select2-selection {
            /* @extend .select-wrapper input.select-dropdown:disabled */
            color: rgba(0,0,0,.3);
            cursor: default;
            user-select: none;
            border-bottom: 1px solid rgba(0,0,0,.3);
        }
        
        &.select2-container--focus {
            .select2-selection {
                box-shadow: none;
            }
        }
    }
}