/* 
    Created on : Oct 15, 2014, 12:00:35 PM
    Author     : bkemp
*/
:root {
    --color-primary-100: #B3D8DD;
    --color-primary-300: #66B2BC;
    --color-primary-400: #3398A5;
    --color-primary-500: #007E8F;
    --color-primary-600: #006572;

    --color-orange-400: #F38744;
    --color-orange-500: #EF6820;
    --color-orange-600: #E04F16;

    --color-orange-dark-300: #FF9C66;
    --color-orange-dark-400: #FF692E;

    --color-gray-25: #F4F5F5;
    --color-gray-50: #E4E7E7;
    --color-gray-100: #D9DCDD;
    --color-gray-200: #C0C4C6;
    --color-gray-300: #969CA0;
    --color-gray-400: #697277;

    --color-success-50: #DFF6CC;
    --color-success-300: #9EE566;
    --color-success-600: #4AAA00;
    --color-success-700: #387F00;
    --color-success-800: #255500;

    --color-error-50: #FAD1D1;
    --color-error-500: #E81717;
    --color-error-600: #BA1212;

    --color-purple-200: #D9D6FE;
    --color-purple-300: #BDB4FE;
    --color-purple-500: #7A5AF8;

    --color-blue-dark-400: #528BFF;
    --color-blue-dark-900: #00359E;

    --color-yellow-800: #F9A825;

    --color-fuchsia-600: #BA24D5;
    --color-fuchsia-900: #6F1877;
}

.gobackbutton{
    display:none;
}
.loginselectuser, .loginnewuser{
    display:none;
}

.pagination>li:first-child>a, .pagination>li:first-child>span {
     margin-left: -1px !important; 
     border-top-left-radius: 0px; 
     border-bottom-left-radius: 0px; 
}

.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}



.Expect3, .Expect3_pop{
    right: -200px;
}
        
.message_center_unread_message{
    background: blanchedalmond;
    z-index: 500;
    width: 100%;
    opacity: 0.6!important;
    filter: alpha(opacity=60) !important;
    position: absolute;
    margin-top: -5px;
    margin-left: auto;
    margin-right: auto;
    left: 0px;
}

.fa-search{
    cursor: pointer !important;
}

.messagecenter_header_table td{
    padding:2px !important; 
}

body{
    background:white;
    font-size:12pt;
    color:black;
    height:100%;
    width:100%;
    overflow-x: hidden;
}
html{
    height:100%;
    width:100%;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1 !important;

}

/*mosys table*/

table {
	width: 100%;
	}

.navigateTable{
    height:44px;
    border-width: 0 0 1px 0;
    gap: 8px;
}

.navigateTable th{
    /* padding:14px 24px 14px 24px; Commenting this out because it's throwing off alignment in reports, and adding line breaks to some reports like Items Purchased jredmon*/
    text-align:left;
    
    border-width: 0 0 1px 0;
    border-color: var(--color-gray-50);
    background-color: var(--color-gray-25);
}

.navigateTable td{
    height:72px;
    border-bottom: 1px solid;
    border-color: var(--color-gray-50);
    padding: 16px 24px 16px 24px;
    gap: 12px;
    background-color:white !important;
}

th {
	/*background-color: var(--color-gray-5);*/
        background-color: var(--color-gray-50);
	/*color: var(--color-gray-dk);*/
        color: #262729;
	/*display: flex;*/
	justify-content: space-between;
	}
			
td {
    color: #343333;
}
			
thead th {
    border-right: 2px;
    border-style: solid;
    border-color: #d9d9d9;
    /*border-bottom: none !important; navigateTable needs border-bottom*/
    border-left: none;
}

.table>tbody>tr:first-child>td {
            border-top: none;
        }
			
thead th:last-child {
	border-right: none;
}		
			
tr:nth-child(odd) {
    background-color: #fafafa;
}		
			
td, th {
	padding: 12px;
}
        
.table-hover>tbody>tr.info>th {
    pointer-events:none;
}

.hoverExempt>tbody>tr:hover>th {
    background-color: var(--color-gray-50);
}

/*Checkbox*/
input.input-checkboxlaunch {
	appearance: none;
	-webkit-appearance: none;
	font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    height: 24px;
    width: 24px;
    border-radius: 4px;
    border: 2px solid var(--color-gray-100);
    /* background: #CCE5E9; */
    cursor: pointer;
    margin-top: 0px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    line-height: 0.9;
    margin: 0;
    flex-shrink: 0;
}
        
input.input-checkboxlaunch:focus {
    /* Focus/Primary */
    outline: none;
}        

input.input-checkboxlaunch:checked:before {
        color: white;
        font-size: 1rem;
        border-radius: 4px;
        line-height: 1.2;
        border: 1.73px solid var(--color-primary-500);
        content: "\f00c";
        background-color: var(--color-primary-500);
        display: block;
        height: 100%;
        width: 100%;
        margin: 0;
    }
        
input.input-radiobutton:checked:before {
	color: white;
	font-size: .55em;
	/*border: 6.4px solid var(--color-blue);*/
        border: 6.4px;
        border-style: solid;
        border-color: var(--color-primary-500);
        inline-size: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        /*line-height: 2.3;*/
        border-radius: 50%;
        content: ""; /*Replaced f1ll with this for firefox fix jredmon*/
        height: 100%;
}        


input.checkboxlaunch-unavailable {
    border: 2px;
    border-style: dotted;
    border-color: #d9d9d9;
    background-color: #fafafa;
    pointer-events: none;  
}

.h1, .h2, .h3, .h4, body, h1, h2, h3, h4, h5, h6 {
    font-family: "Nunito Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500 !important;
}

.print_table td{
    text-align: right !important;
}

.print_table th{
    background: #F5FCFF !important;
}
.print_table .subheader{
/*        border-left: 1px solid black !important;
        border-right: 1px solid black !important;*/
}

td{
    vertical-align: middle !important;
    padding:8px !important;
    text-align: center !important;
}

label{
    vertical-align: middle !important;
    padding-right:2px;
}

input{
    vertical-align: middle !important;
}
th {
    /*text-align: left !important;*/
}

.modal-title{
    font-weight: bold !important;
    font-size:16px !important;
    text-align: left;
}

.modal-footer {
    padding: 10px !important;
}

.modal-footer2 {
    padding: 10px !important;
    margin-bottom: 40px !important;
}

.btn {
 font-weight:500;   
}

.group_header_table td{
    vertical-align: top !important;
    padding:5px !important;
    text-align: left !important;
    width:30%;
}

.alert-warning input,.alert-success input{
        color: rgba(0,0,0,.84);
}

.panel-title{
    font-weight: bold !important;
    /*font-size:18px !important;*/
    /*line-height:28px !important;*/
    vertical-align: middle !important;
    text-align: left;
}
.savebutton{
    float:right;
}
.cancelbutton{
    float:left;
}
.deletebutton{
    float:left;
}
.loading_div_default
{
    background: url(../images/metro_default_loading.gif) no-repeat center center fixed;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;

    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}

.cart_horizontal{
    width:48% !important;
    float:left;
    min-height: 1000px;
}
.cart_horizontal canvas{

}
#page_signin{
    text-align:center;
}

.clear{
    float: none;
    clear:both;
    padding: 0px;
    margin:0px;
    height:0px;
    line-height: 0px;
}

#onboardqueuetable td{
    text-align: center !important;
    
    
}
a{
     cursor: pointer !important;
}

#edit_event_table th{
    text-align: center !important;
    
}

.reftable th{
    text-align: center !important;
}

.reftable{
    margin-bottom: 0px !important;
}

.event_well .control-label{
    width:150px;
    text-align:right;
}

#submit-signin{
    width:90%;
    text-align:center;
    margin-left:5%;
    margin-right:5%;
    cursor: pointer !important;
}

.ltpage{
    display:none;
    text-align:center;
/*    margin-left:5%;
    margin-right:5%;*/
}

#primarypannel{
    text-align:center;
    border:0;
    height:100%;
}

#primarypannel .panel-heading{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border:0;
}
#scanpage{
    
    border:1px solid #0070A3;
    
}
#error_div{
    width:100%;
}



input[type='number'] {
    -moz-appearance:textfield;
}

/*input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}*/

#form-pin{
    height:100%;
     
}

#form-pin input[type='number']{
    -webkit-text-security: disc;
}

#progressbar, #userprogressbar{
display: none;
height:10px;
}

.panel{
/*    border:0 !important;*/
border:0;
}

.progress{
        margin-bottom: 5px !important;
}

#cheeseburger{
    position: absolute;
    float:right;
    top:0px;
    right:10px;
   margin-top:10px;
}
.alert-dismissable{
    z-index:100 !important;
}

.main_header{
height: 50px;
padding:0px;
margin:0px;
padding-top:10px; 

}

.dropdown-submenu {
    position: relative;
    overflow:visible !important;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: auto;
    right: 100%;
    margin-top: -1px;
    width: auto;
    padding-left:10px;
    padding-right:10px;
    min-width:100px;
    white-space: nowrap;
    overflow:visible !important;
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

.pagination>li>a, .pagination>li>span {
    padding: 3px 6px;
}

#modal_custom_points{
    display: none;
}

.modal_title_bg{
    background:var(--color-gray-50);
    color:#D7F1FD;
}

.modal_title_bg_stu{
    background:#262729;
    color:white;
}

.modal_title_stu{
    font-weight: 500;
}

#info_message, #error_message, #warning_message {
    z-index: 2002 !important;
    position: absolute;
    left:30%;
    display: none;
    border-radius: 10px;
    margin:0 auto !important;
    width: 40%;
    position: fixed;
    top: 2%;
}

#message_center_preview{
    display:none;
    background:white;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    border-radius: 0px;
    border-radius: 4px;
    border:1px solid #C0C0C0 !important;
    height:300px;
    width:225px;
    position: absolute;
    z-index:100;
    right: 72px;
    top: 47px;
    color: black;
    font-size: 10px;
    text-align: left;
}

#message_center_preview>#notifytitle{
    width: 100%;
    border-bottom: 1px solid #C0C0C0 !important;
    height: 28px;
    padding-top: 12px;
    padding-left: 4px;
    font-weight: bold;
    text-align: center;
}


.message_preview_card{
    padding: 5px;
    border-bottom: 1px solid #C0C0C0 !important;
    height: 42px;
    position: relative;
    cursor: pointer !important;
        overflow: hidden;
        background:white;

}

.message_preview_card:hover{
    background-color:#edf2fa;
}

.message_preview_card_message{
    color:black;
    padding-top: 0px;
    width: 80%;
    height: 80%;
        overflow: hidden;
    float: right;
    text-align:right;
}

#message_center_preview_header{
    position: absolute;
    text-align: center;
    top: 3px;
    line-height: 0.7;
    font-size: 14px;
    width: 100%;
    height: 20px;
    cursor: pointer !important;
    color: var(--color-primary-500);
}

#message_center_preview_footer{
    position: absolute;
    text-align: center;
    bottom: 2px;
    border-top: 1px solid #C0C0C0 !important;
    width: 100%;
    height: 10px;
    color: #03a9f4;
}

.message_preview_card_timestamp{
    float: right;
    font-size: 9px;
    color: gray;
    position: absolute;
    right: 4px;
    top: 30px;
}

#message_center_top_arrow{
    position: absolute;
    top: -14px;
    right: 26px;
    width: 30px;
}

 #info_message .message_icon, #error_message .message_icon, #warning_message .message_icon{
  position: absolute;
  top: 10px;
  left: 21px;
  color: inherit;
  font-size:28px !important;
}

.message_flash{
    color:pink !important;
}
.login_form{
    text-align:center;
   width: 100%;
    
    
}

.login_form label{
    float:left;
    width: 120px;
    text-align: right;
}

.login_form input{
    width: 100%;
}

#login_submit{
/*    width: 32%;*/
    float: right;
/*    padding-right: 15px;*/
}

#login_help{
/*    width: 33%;*/
        display: inline-block;
        float:left;
    text-align: left;
}
.modal-content .modal-body{
    padding:15px !important; 
    padding-left:20px !important; 
    padding-right:20px !important;
}

#modal_password_recover .modal-content .modal-body{
    text-align: left;
}

#poweredby{
/*    width: 32%;*/
    float: left;
}

#poweredby img{
    width: 160px;
}


#content{
    font-size:12pt;
    display: inline-table;
    height: 100%;
    width:100%;
}

.button-bar{
    cursor: pointer !important;
    
}

.table th{
    text-align:center;
}


.usericon{
    font-size:12pt;
}

#active_wrapper{
    height:200px;
}

#active_wrapper .checkbox{
    position: absolute;
    bottom:0px;
    margin-left:60px;
}

#subroles .radio, .checkbox{
    text-align: left;
}
#passwordscore_container{
    padding-left:100px;
    /*width: 300px;*/
}
#subroles{
float: right;
    width: 250px;
    position: absolute;
    top: 10px;
    right: 5px;
}

#user_edit_fields_left{
/*    margin-left: 12%;*/
    float: left;
    width: 320px;
}

#user_edit_fields_right{
/*    margin-left: 12%;*/
    float: right;
    width: 320px;
    position: relative;
}

.userroles .checkbox{
    padding:2px !important;
    margin:2px !important;
}


.userroles .radio{
    padding:2px !important;
    margin:2px !important;
}

.storecatdropdownentry{
    font-weight: normal;
    cursor: pointer;
}

.store_addnew{
    color: #0f9d58;
}

.menu-list{
    background: #f5f5f5;padding:15px; border-radius: 5px;
}

.menu-list .well {
    background: white; border-radius: 10px;padding:5px;
}


/*
.icon-preview {
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #D5D5D5;
    border-radius: 3px;
    cursor: pointer;
}
.icon-preview span {
    display: none;
    position: absolute;
    background: black;
    color: #EEE;
    padding: 5px 8px;
    font-size: 15px;
    font-family: Roboto;
    border-radius: 2px;
    z-index: 10;
}
.icon-preview:hover i { color: #4285f4; }
.icon-preview:hover span { display: block; cursor: text; }*/


.form-group-right{
    float:right;
    width:50%;
}
.form-group-left{
    float:left;
    width:50%;
}

.user_photo{
    width:200px;
    height:200px;
    border:2px solid var(--color-primary-100);
}

/******  Overrides *************/
.btn-fab-sm{
    width:38px !important;
    height:38px !important;
    font-size:20px !important;
    padding:9px !important;
}

.btn-fab-sm_refs {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    padding: 6px !important;
}

.breadcrumb-bar{
    margin-bottom:0px !important;
    background-color: inherit !important;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 60px;
    line-height: 30px;
}

.breadcrumb-bar a{
    color:rgba(255,255,255,.84);
}

.breadcrumb-bar .current{
    /*font-weight: bold;*/
    color:white;
}

.modal-header{
    padding:10px !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-content{
    margin-top:0px !important;
    border-radius: 5px;
}

#editbutton{
    display: none;
}

.formreadonly input,textarea,checkbox,radio,file {
    cursor: initial !important;
    border: none !important;
    font-size: 14px;
    width: 100%;

}

.formreadonly select{
    cursor: initial !important;
    font-size: 14px;
    width: 100%;
}

.formreadonly select,file{
    width: 100%;
    margin-right:60px;
    background-color: white;
    border:0px !important;
    -webkit-appearance: none;

}

.rostyle{
    background-color: ghostwhite !important;
    color:#5F5F5F !important;
    border:1px solid gray !important;
}

.nobox{
    border: 0px !important;
    font-size: 12px;
    line-height: 20px;
    vertical-align: middle !important;
    padding-left:5px;
    background-color: transparent;
}

.loader {
  margin: 6em auto;
  font-size: 2px;
  position: relative;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotate_headers {
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    width: 65px;
    height: 82px;
    vertical-align: top !important;
    border-bottom: 1px solid #03A9F4 !important;
    position: relative;
    cursor: pointer !important;
    color:#428BCA
}

.rotate_headers:hover{
 text-decoration: underline;
}


.rotate_headers > span{
border-bottom: 1px solid #03A9F4;
    width: 140px;
    display: inline-block;
    position: absolute;
    top: 70px;
    left: 14px;
}

.role_headers{
    width: 95px;
    text-align:center !important;
}

.role_cells{
    width: 95px;
    height: 82px;
    text-align:center !important;
}
.role_Info_cells{
    text-align:left !important;
}


/*#SubOrgSearchResults td{
  text-align: left!important; 
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}*/
.rotate_cells {
     width: 30px;
     text-align: center !important;
}

.student_cells {
     width: 80px;
     text-align: center !important;
}

.loader_dark {
  border-top: 1.1em solid rgba(100, 100, 255, 0.1);
  border-right: 1.1em solid rgba(100, 100, 255, 0.1);
  border-bottom: 1.1em solid rgba(100, 100, 255, 0.1);
  border-left: 1.1em solid #03A9F4;
}

#searchrightSubOrg{
   position: relative;
    float:right;
    margin-right:5px;
    bottom:35px;
    height:10px;
}

#searchleft{
    position: absolute;
    float:left;
}

#searchright{
    position: absolute;
    float:right;
    margin-left:180px;
    bottom:6px;
}


#searchright_log {
    position: absolute;
    float:right;
    right:20px;
    bottom:1px;
}




#searchLoader{
    display:none;
}

#searchLoader2{
    display:block;
    color:blue;
    position: absolute;
    float:left;
}


.floating_back{
    position: absolute;
    float:left;
    left:20px;
    margin-top: -30px !important;
}
.floating_back a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}

.floating_back2{
    position: absolute;
    float:left;
    left:20px;
    margin-top: -25px !important;
    z-index: 200;
}
.floating_back2 a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}

.changelog_body{
    text-align:left;
    font-size:16px;
    overflow: scroll;
    height:450px;
}

.floating_whatsnew{
    position: absolute;
    float:left;
    left:30px;
    margin-top: -25px !important;
    z-index: 200;
}
.floating_whatsnew a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}

.floating_forward{
    position: absolute;
    float:right;
    right:20px;
    margin-top: -30px !important;
}


.floating_forward a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}


.floating_left{
    position: absolute;
    float:left;
    left:20px;
    margin-top:15px;
/*    margin-bottom: 1px !important;*/
}
/*.floating_left a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}*/


.usericon img{
    border-radius: 100%;
    height:50px;
    width:50px;
/*    box-shadow: 1px 1px 1px #888888*/
}
.usericon {
    float:left;
    
}




.accordian-main{
    width:100%;
}

.accordian-header{
    width:100% !important;
    font-weight: bold;
    margin-bottom: 0px !important;
    padding-left: 5px !important;
/*    padding-top: 10px !important;
    padding-bottom: 10px !important;*/
}

.accordian-body{
    margin-left:2px;
    margin-right:2px;
    text-align: left;
    padding: 10px;
    border:1px solid #0070A3;
    margin-bottom: 2px !important;    
    
}

.accordian-toggle-button{
    float:left;
    color:white;
    font-size:22px;
}
.accordian-toggle-button:hover{
    color:white;
    text-decoration: none;
}
.accordian-header_{
    width:100% !important;
    font-weight: bold;
    margin-bottom: 0px !important;
    padding-left: 5px !important;
    color: #31708f !important;
    background-color: #d9edf7;
   padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.items_table th.center{
    text-align: center !important;
}
.admin_shop{
    position: absolute;
    float:right;
    right:20px;
    margin-top: -30px !important;
}


.admin_shop a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}

.admin_shop2{
    position: absolute;
    float:right;
    right:20px;
    margin-top: -10px !important;
}


.admin_shop2 a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}

.admin_logs{
    position: absolute;
    float:right;
    right:80px;
    margin-top: -10px !important;
}


.admin_logs a{
    width:50px !important;
    height:50px !important;
    font-size:30px !important;
    padding-top: 10px !important;
}


.catright{
    float:right;
    height:28px;
    position: absolute;
    top:0px;
    right:20px;
    font-size:16px;
    padding-top: 1px !important;
    padding-bottom: 4px !important;
}

.catdeletebutton{
    display: none;
}


#index-menu{

/*    max-width: 800px;*/
/*    margin-right:auto;
    margin-left:auto;*/
text-align: center;
}
#index-menu .row-action-primary i{
    background: #03A9F4;
    font-size:30px;
}

#searchLoader2{
    position: absolute;
    float:right;
    margin-left:300px;
    top:10px;
    display:none;
}

.store_search{
    position: relative;
    padding:20px;
    padding-top:0px;
}

.outofstock span{
    color:red;
    padding:5px;
    border:1px solid red;
}

#buyerror{
    display: none;
    width:70%;
    padding: 10px;
    margin-top:3px;
    max-width: 800px;
    margin-right:auto;
    margin-left:auto;
  /*  background:#4285F4;*/
}

#balancereplytext{
    padding:10px;
    display:none;
    margin-left:auto;
    margin-right:auto;
}


#eventloader{
    margin-bottom: 0px !important;
    height:10px;
}



#loading_screen{
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  display:none;
  z-index :5000;
}

#loading_screen div{
  width: 30em;
  height: 30em;
  
  border-top: 2em solid rgba(100, 100, 255, 0.4);
  border-right: 2em solid rgba(100, 100, 255, 0.4);
  border-bottom: 2em solid rgba(100, 100, 255, 0.4);
  border-left: 2em solid #03A9F4;
}


.resetbuttons{
    padding:5px !important;
    margin-right:3px;
}

.name, .student-picture, .student-code {
    display: block;
    margin: auto;
}

.name {
    margin-bottom: 10px; 
    text-align: center;
}

.student-picture {
    height: 200px;
    max-width: 200px;
}

.roster-user {
    float: left; 
    margin: 10px;
}



.admin_roster a {
	font-size: 30px !important;
	width: 50px !important;
	height: 50px !important;
	padding-top: 10px !important;
}

.admin_roster {
	position: absolute;
	float: right;
	right: 10px;
	margin-top: -30px;
}

.admin_roster2 a {
	font-size: 30px !important;
	width: 50px !important;
	height: 50px !important;
    margin-top: -10px !important;
    padding-top:10px !important;
}

.admin_roster2 {
	position: absolute;
	float: right;
	right: 140px;
}

.dashboard_referral{
    padding:5px;
    display:block;
    width:100% !important;
    background:#C00000;
    color:white;
    border-bottom:1px solid red;
    font-weight: bold;
    opacity:0.80 !important; 
    filter:alpha(opacity=80) !important;
}
.dashboard_scans{
    padding:5px;
    display:block;
    width:100% !important;
    background:#6BACE6;
    color:#F3FAD2;
    border-bottom:1px solid #4586AD;
    font-weight: bold;
    margin-top:2px;
    opacity:0.80 !important; 
    filter:alpha(opacity=80) !important;
}

.dashboard_points{
    padding:5px;
    display:block;
    width:100% !important;
    background:#FFEA7D;
    color:#D17E07;
    border-bottom:1px solid #FFAF17;
    font-weight: bold;
    margin-top:2px;
    opacity:0.80 !important; 
    filter:alpha(opacity=80) !important;
}

.edit_school_group {
	width: 32px !important;
	height: 32px !important;
    font-weight: bold;
	font-size: 20px !important;
}

.unlock_view {
	width: 1132px !important;
	height: 1132px !important;
	font-size: 800pt !important;
}

#cancelgroupbutton, #submitgroupbutton,#deletegroupbutton { 
	margin-top: 20px !important;
}

.remove_student_group {
	width: 32px !important;
	height: 32px !important;
	font-size: 20px !important;
}

.remove_group {
    width: 32px !important;
    height: 32px !important;
    font-size: 20px !important;
}

.schoolinfo_left{
    text-align: left;
    margin:15px;
    float:left;
    width:95%;
    min-height:630px;
    position: relative;
    display:none;
}

.customars_left {
    text-align: left;
    margin: 10px;
    float: left;
    width: 95%;
    position: relative;
}

.schoolinfo_right{
    text-align: left;
    margin:20px;
    float:left;
    padding:20px;
    min-width: 400px;
}

.form-control_new{
   margin-bottom:3px;
   border:2px solid #d9d9d9;
   border-radius: 5px;
   padding:5px;
   /*font-size:12px; */
}

.form-control_new_login{
   margin-bottom:2px;
   border:2px solid #d9d9d9;
   padding:5px;
   font-size:12px;
   margin-top:10px
}

.form-control_error{
   margin-bottom:3px;
   border:1px solid #E0E0E0;
   padding:5px;
   font-size:12px;
   border: 2px solid var(--color-orange-dark-300)
}

.form-control_new select{
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
}

.nooverridingstudent{
    border: 2px solid red;
}

.schoolinfo_panel .form-control_new{
    width:200px;
}
.user_details .form-control_new{
    width:200px;
}
.user_details label{
    float:left;
    width:100px;
    text-align: right;
    padding-right:3px;
}

.schoolinfo_panel .checkbox{
    margin-left:230px;
}
.schoolinfo_panel label{
    width:100px;
}
.schoolinfo{
    text-align: center;
}

.schoolinfo_panel{
/*    height:535px;*/
    overflow-y: auto;
}
.schoolinfo_panel .right_icon{
        margin-top: -6px;
    margin-right: -7px;
    float:right;
} 


.grading_periods_header{
    position:relative;
}

.grading_periods_header .checkbox{
    margin:0px !important;
    padding:0px !important;  
    float:right; 
    position: absolute;
    right:0px;
    top:5px;
    font-weight: bold;
}

.currentgp{
    color: #0f9d58;
    font-size:18px;
    font-weight: bold;
}



.grading_periods_header label{
    font-weight: bold;
}



.grading_periods_table {
    font-size:14px;
}

.grading_periods_table .btn{
    height:28px !important;
    width:28px !important;
    font-size:16px !important;
}

.grading_periods_table td{
    text-align: center !important;
}


.schoolinfo_panel .panel-heading{
    font-weight:bold;
    
}

.schoolinfo_panel .checkbox{
    padding-top: 0px !important;
}

.header-span{
    padding:5px;
    text-align: center !important;
    width:100%;
    font-weight: bold;
    font-size: 18px;
}


#group_list{
    float:left;
    padding-top:1px;
    overflow-y: auto;
}

#group_list li{
    list-style: none;
    margin-left:-40px;
    text-align: right;
    padding:5px;

}

#group_student_list{
    padding-top:5px;
    float:left;
    padding-top:1px;
}

#group_student_list li{
    list-style: none;
    padding:5px;
    margin-left:-40px;
}
#group_students_div{
    overflow-y: auto;
    height:400px;
    
}
.search_container{
    position: relative;
}
.group_ajax_list{
    max-height:400px;
    width:100%;
    z-index: 1000;
    float:left;
    position:absolute;
    display: block;
    background:white;
    /*border-left: 1px solid #03a9f4 !important;*/
    /*border-right: 1px solid #03a9f4 !important;*/
    overflow-y: auto;
}

.ajax_list{
    max-height:400px;
    width:100%;
    z-index: 1000;
    float:left;
    position:absolute;
    display: block;
    background:white;
    border:1px solid #0070A3;
    overflow-y: auto;
    padding-left:3px;
    right:0px;
    display:none;
}

.close{
    color:var(--color-gray-400);
    font-weight: bold;
    opacity: 1 !important;
}

.circle-sm{
    width: 36px;
    height:36px;
/*    padding: 2px;*/
    border-radius: 100%;
}
.circle_pic {
    border-radius: 100%;
    height: 200px !important;
    width: 200px !important;
}

.circle-sm-stu{   
    border-radius: 30%;
    height:20px !important;
    width:20px !important;
    font-size: 16px !important;
    padding:6px;
    text-decoration: none;
/*    padding-bottom:2px !important;*/
}

.circle-sm-stu i{
  margin-left:-8px !important;
}

#sProfilePic {}
#sProfileInfo { text-align: left; display:inline-block;}


@media (max-width:1024px){
    .sdesc {display: none;}
}

.modal {
     overflow-y: auto !important;
}

.modal-dialog-2 {
    margin-top:80px;
}

.sublog{
    display:none;
}

#menu_school_corp{
    display:none;
}

#menu_school{
    display:none;
}

.menu_link{
    font-size: 26px;
    text-decoration: none !important;
}

.menu_link_parent{
    padding-top:20px !important;
    padding-bottom:20px !important;
}
.main_menu_title{
    height:30px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
    margin-top: 2px !important;
    margin-bottom: 1px !important;
    font-weight: bold;
}
.mygroups_title_label{
/*  width: 450px;*/
  text-align: left;
}

.sort-filter-group{
      box-shadow: none !important;
      width:100%;
}


.sort-filter-group .btn{
    width:auto !important;
}
.sort-filter-group .btn i{
  font-size: 26px;
  line-height: 1px;
  vertical-align: middle;
}
.sort-filter-group .btn btn-info { 
/*    border-radius: .5em !important;*/
    float:none !important;
}
.ddsort label{
    padding-left:35px !important;
    width:200px !important;
}

.sort-active{
    opacity:0.60 !important; 
    filter:alpha(opacity=60) !important;
}

.left_align_table td{
    text-align: left !important;
    
}

.presenceList{
    display: inline-block;
    height:auto;
    max-height: 150px;
    max-width: 205px;
        overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}


.deskview-group{
    float:left;
    margin:10px;
    cursor: pointer !important;
    border:5px solid white !important;
    padding:10px !important;
   position: relative;
   height:200px;
   width:150px;
   border:1px solid #03a9f4 !important;
   border-radius: 10px !important;
}

.deskview-group-hili{
    border: 2px solid var(--color-primary-800) !important;
    border-radius: 10px !important;
    background: var(--color-primary-500) !important;
    color: white !important;
}

.deskview-group-messaging{
    border: 2px solid black !important;
    border-radius: 10px !important;
    background: #03a9f4 !important;
    color: white !important;
}

.deskview-messaging-groups{
    float:left;
    margin:10px;
    cursor: pointer !important;
    border:5px solid white !important;
    padding:10px !important;
   position: relative;
   height:200px;
   width:150px;
   border:1px solid #03a9f4 !important;
   border-radius: 10px !important;
}

.deskview-group:hover{
    box-shadow: 0 1px 2px rgba(0,0,0,.16);
    /*    background: #B9FFFE !important; */
    border: 3px solid black !important;
}

.deskview-group img{
    width:100px;
    height:100px;
/*    position: absolute;*/
top:-50%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

.deskview-group .first_name{
    font-weight: bold;
    font-size:18px;
}
.deskview-group .last_name{
    font-weight: normal;
    font-size:14px;
}

.deskview-group .name_box{
    overflow: hidden;
    position: absolute;
    bottom:10px;
    left:0px;
    width:100%;
    text-align: center;
    display: box;
}

.deskview-modal{
    float:left;
    margin:10px;
    border:5px solid white !important;
    padding:10px !important;
}

.deskview-modal img{
    width:100px;
    height:100px;
}
.deskview-modal .first_name{
    font-weight: bold;
    font-size:18px;
}
.deskview-modal .last_name{
    font-weight: normal;
    font-size:14px;
    display: block;
    float: left;    
}

#logarray{
    display: none;
}

.group_teacher_name{
    position: absolute;
    bottom:5px;
    left:0px;
    width:100%;
    font-size:14px;
    font-weight:bold;
    overflow:hidden;
}

.deskview-group_unlock{
    font-size: 70px !important;
    width: 100px !important;
    height: 100px !important;
}

#card_menu_Reports .deskview-group_addnew {
    font-size: 40px !important;
    font-size: 60px !important;
    color: #03a9f4;
}

#card_menu_Reports .deskview-group_menu {
    padding: 10px !important;
    background: white;
    border: 1px solid #03a9f4 !important;
}

#card_menu_Reports .deskview-group_addnew{
    font-size: 40px !important;
/*    width: 70px !important;
    height: 70px !important;*/
    font-size: 60px !important;
    color:#03a9f4;
}

.deskview-group_addnew{
    font-size: 40px !important;

    font-size: 68px !important;
    color:#03a9f4;
}
.deskview-group_menu{
    padding:20px !important;
    background:white;
    border:2px solid #d9d9d9 !important;
}

.mygroups_secondrow{
  vertical-align: top !important;
  width: 975px;
  margin-left: auto;
  margin-right: auto;
}

.mygroups_firstrow{
  width: 975px;
  margin-left: auto;
  margin-right: auto; 
}

.mygroups_secondrow_buttons{
      float:right;
}
.mygroups_secondrow_search{
  /* position: absolute; */
  
  float: left;
/*  margin-right: 415px;*/
}

.referral_search{
  /* position: absolute; */
  padding-left:50px;
  float: left;
/*  margin-right: 415px;*/
}

.main_menu_panel{

/*    background-image: url("../images/PBIS-site-background-even-less-blur.jpg");
    background-color: rgba(0, 0, 0, 0);
    background-size: cover;
    background-position: 100% 0%;
    background-repeat: no-repeat;*/
    
    background: #f9f9f9;
    
    margin-left:20px;
    margin-right:20px;
}

.student_referral_search_results{
  width: 350px !important;
  text-align: left;
}

.contact_search_results{
  position: absolute;
  width: 250px !important;
  border: 0px !important;
  text-align: left;
  max-height:300px;
}

#givepoints_numbers_top{
  vertical-align: middle;
  z-index: 100;
}
#givepoints_numbers_top a{
    width:35px !important;
    padding:0px !important;
    margin: 0px !important;
}

.grplists{
    padding:5px;
    width: 250px;
}

.popout {
    animation: popout 2s ease;
    -webkit-animation: popout 2s ease;
/*    border:1px solid #03a9f4 !important;*/
}

@keyframes popout {
    from{transform:scale(0)}
    80%{transform:scale(1.5)}
    to{transform:scale(1)}
}

@-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    80%{-webkit-transform:scale(1.5)}
    to{-webkit-transform:scale(1)}
}

.pointsmenu{
    position: relative;
}

.pointsmenu-button{
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    font-size: 28px;
    margin-top:50px;
    margin-left:10px;
    margin-right:10px;
}

.pointbuttons a{
    width: 42px !important;
    text-align: center;
}

.truncate250 {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sort-adjust label{
    font-size:12px;
    bottom: 0px;

}

.sort-adjust a{
    padding: 9px !important;
    font-weight: bold;
    font-size: 16px !important;
}

.display-adjust{
    float:right;
}

.lock-adjust{
    float:right;
}

.display-adjust label{
    font-size:12px;
    bottom: 0px;
    padding-left:18px;
    position: absolute;
}

.volume-adjust{
    float:right;
    padding-right:20px;

}

.volume-adjust label{
    font-size:12px;
    bottom: 0px;
    padding-left:38px;
    position: absolute;
}

#table_1point .checkbox{
    margin:0px !important ;
    
}

#table_1point {
    margin-left: auto;
    margin-right: auto;
}

#table_3point .checkbox{
    margin:0px !important ;
    
}

#table_3point {
    margin-left: auto;
    margin-right: auto;
}

.grplock-adjust{
    float:right;
    padding-left:30px;
        margin-right: auto;
    margin-left: auto;
}
.grpdisplay-adjust label{
    font-size:12px;
    bottom: 0px;

}

.grpvolume-adjust label{
    font-size:12px;
    bottom: 0px;
}

.pendo-adjustment{
    margin-right:60px;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    pointer-events: none;
    color: var(--color-gray-400) !important;
    border: 2px dotted #bfbfbf !important;
    background: white !important;
}

.exp_buttonlist > .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info {
    color: #fff !important;
    background-color: var(--color-primary-500) !important;
/*    border: 1px solid black !important;*/
    opacity:1 !important; 
    filter:alpha(opacity=100) !important;
}

.exp_buttonlist > .btn-info {
/*    color: #fff;
    opacity:0.60; 
    filter:alpha(opacity=60);*/
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #03a9f4;
    border: 1px solid #03a9f4 ;
    background: white;
    font-size: 12px;
    padding: 4px 12px;
    
}

.exp_buttonlist{
    margin:0px !important;
    padding:0px !important;
    box-shadow: none;
    -webkit-transition: box-shadow inherit;
    transition: box-shadow inherit;
}

#table_3point td, #table_1point td{
    padding:0px !important;
    margin:0px !important;
    text-align:left !important;
}


#as_teacher_div{
    display:none;
}

#grouptitle{
    font-size:16px;
    font-weight: normal;
    padding:5px;
}


.desktop_badge_student{
    background-color: green;
    position: absolute;
    /* margin-left: -45px; */
    /* margin-top: -25px; */
    top: -15px;
    left: -10px;
    font-size:18px;
    border: 1px solid #03a9f4 !important;
     
}

.desktop_badge_groupauto{
    background-color: #FF5722;
    position: absolute;
    /* margin-left: -45px; */
    /* margin-top: -25px; */
    top: -5px;
    left: -5px;
    font-size:18px;
    border: 1px solid #03a9f4 !important;
     
}

.desktop_badge_groupfav_notfav{
    background-color: white;
    color:red;
    position: absolute;
    top: -5px;
    right: -5px;
    font-size:18px;
    border: 2px solid pink !important;
}

.desktop_badge_groupfav_fav{
    background-color: pink;
    color:red;
    position: absolute;
    top: -5px;
    right: -5px;
    font-size:18px;
    border: 2px solid pink !important;
}

.desktop_badge_student_delete a{
    text-decoration: none !important;
}

.desktop_badge_student_delete a:hover, a:focus{
    text-decoration: none !important;
}


.desktop_badge_student_modal{
    background-color: green;
    position: absolute;
  left: 0px;
  top: 20px;
    font-size:18px;
    border: 1px solid #03a9f4 !important;
}

.borderpanel{  
    border: 2px solid var(--color-gray-50); 
}

.search_button_options{
  float: right;
  margin-top: 5px !important;
  margin-right: 5px !important;
  z-index: 100;
  font-size: 18px !important;
/*  width: 32px !important;
  height: 32px !important;*/
}

.dashboard_teacher_panel{
    width:350px;
    height:430px;
    float:left;
    margin:10px;
}

.store_category_panel{
    float:left;
    width:100%;
    margin:10px;
}

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    float:right;
}

.chart-legend li {
    list-style: none;
    
}
.doughnut-legend li span{
    border-radius: 100%;
}



.dashboard_teacher_chart_container{
    width:130px !important;
    height:105px !important;
    float:left;
    position: relative;
    text-align: left !important;
}

.dashboard_teacher_panel panel-body{
    position: relative;
}


.donut_chart_total{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  right: 165px;
  top: 65px;
}

.chart-legend .doughnut-legend{
/*    font-size:12px !important;*/
    width:102%;
    background:gainsboro;
    float:right;
    text-align: left;
    padding:10px !important;
    border-radius: 5%;
}

.chart-legend .polararea-legend{
    font-size:12px !important;
    width:200px !important;
    background:gainsboro;
    float:right;
    text-align: left;
    padding:10px !important;
    border-radius: 5%;
}

.dashboard_teacher_chart_container canvas{
/*    width:130px !important;
    height:105px !important;*/
    float:left !important;
    position: absolute;
    left:0px !important;
}

.dashboard_teacher_chart_links{
    width:100%;
    text-align: left;
    padding:20px;
}

.dashboard_teacher_chart_links .btn{
  width: 32px !important;
  height: 32px !important;
  font-size: 22px !important;
  padding: 4px !important;
  margin: 5px !important;
}

.dashboard_teacher_chart_links a{
    text-decoration: none;
}

.report_page_links{
    width:100%;
    text-align: left;
    padding:10px;
}

.report_page_links .btn{
width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
    padding: 9px !important;
    margin: 5px !important;
}

.report_page_links a{
    text-decoration: none;
}

#header_logo{
    z-index: 100;
}

.starred_student{
    border-radius: 100%;
    border-bottom: 1px solid #03a9f4 !important;
    position: absolute;
    color: black;
    display:inline-block;
    background: url(../images/bluestar.png);
    background-repeat: no-repeat;
    background-position: center; 
    z-index: 300;
    display:none;
    top:-38%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size:26px !important;
    font-weight: bold;
}

.datepicker { width: 17em;}


#EventInformation{
  top: 135px;
  width: 415px;
  padding: 10px !important;
  padding-top: 5px !important;
  display: none;
}

#EventInformation h4{
font-weight: bold;
}

#SubOrgSearchResults{
    font-size: 14px !important;
}
#SubOrgSearchResults .usericon{
    font-size: 14px !important;
}

.user_detail_table{
    width:100%;
/*    border: 1px solid #ddd !important;*/
}

.user_detail_table th,
.user_detail_table td{
    text-align: center !important;
    border: 1px solid #ddd !important;
}

#badgepreview{
  display:none;
  width: 220px;
/*  position: absolute;*/
  left: 520px;
  top: 180px;
}

#badge_queue{
    display:block;
    
}
#queueloader{
    display:none;
}
#printoptions{
    display:none;
}
#BadgePrintQueue{
    display:none;
}

#print_button{
    display:none;
}
#queuesearch{
    display:none;
}

.purchase_modal .control-label{
    width:150px !important;
}

#buyerror{
    font-size:14px;
}

.store_item_panel .control-label{
    width:50px !important;
}

.add_category_body .form-control_new {
    width: 200px;
}

.add_category_body label{
    width:100px;
    text-align: right;
}

.add_item_body .form-control_new {
    width: 200px;
}

.add_item_body label{
    width:100px;
    text-align: right;
}

.add_event_body .form-control_new {
    width: 200px;
    float:left;
}

.add_event_body{
    padding:24px;
}

.add_event_body label{
    width:200px;
    text-align: right;
    float:left;
    padding-right:3px;
}

.checkbox_control{
    width: 200px !important;
}

.user_referrals_table{
    width:100%;
    font-size:12px;
}

.user_referrals_table th{
   background: #03A9F4 !important;
   color:white !important;
   padding:3px !important;
   font-size:14px;
}

.subheader{
    border-top: 2px solid var(--color-gray-50) !important;
    border-bottom: 2px solid var(--color-gray-50);
    font-weight:bold;
    background: var(--color-gray-50) !important;
    padding:5px;
    color: #262729;
}

.btn-fab-sm-ex {
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
    padding: 5px !important;
} 

.minreferral_form_table td{
    text-align: left !important;
    border: 1px solid #ddd;
    /*vertical-align: top !important;*/
}
.minreferral_form_table th{
    border: 1px solid #ddd;
    /*vertical-align: top !important;*/
}

.referral_form_section_panel{
    margin:20px;
}


.referral_form_table td{
    text-align: left !important;
    border: 1px solid #ddd;
    vertical-align: top !important;
}
.referral_form_table{
    margin-bottom: 0px !important;
}
.referral_form_table .checkbox{
    padding-top: 1px !important;
}


.referrals_checkbox_list{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    margin-top: 1px !important;
    list-style: none;
    overflow: auto;
    padding-left: 15px;
}

.referrals_checkbox_list label{
    margin-top: 1px !important;
}

#usertype a:hover {
    color: #343333 !important;
}

#gradesearch a:hover {
    color: #343333 !important;
}

#reportPerm a:hover {
    color: #343333 !important;
}

.grades_checkbox_list{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    margin-top: 1px !important;
    list-style: none;
    overflow: auto;
    padding-left: 5px !important;
}

.grades_checkbox_list .checkbox{
    padding-top: 1px !important;
    margin-left:0px !important;
}

textarea{
    width: 100%;
    border: 2px solid #d9d9d9 !important;
}

.student_report_panel { 
    text-align: left;
}

.student_report_table th{
    border-bottom:1px solid #0070A3 !important;
}

.student_report_table td,th{
    vertical-align: middle !important;
}

student_report_table td:last-child{
    width:100%;
}

.gradesplit{
    border-top: 1px solid black !important;
    border-bottom: 1px solid black;
    font-weight: bold;
    background: #F5FCFF !important;
    padding: 5px;
}


.completed_header_table td{
    padding: 0px !important;
    text-align: left !important;
}



.dpgdata{
    width:100%;
    background: var(--color-primary-100) !important;
    border: 1px solid black !important;
    height:30px;
    padding:5px !important;
    margin:5px !important;
    font-weight:bold;
}

.dpgdataname{
    text-align:left;
    height:25px;
    width:85%;
    float:left;
    
}


.dpgdatapoints{
    text-align:right;
    height:25px;
    width:15%;
    float:right;
}

.CardSubmenu{
        display: inline-block;
        margin-top:5%;
}


.modal{
    background: rgba(0, 126, 143, 0.8);
}


#userpermissions_table{
    width:100%;
    border: 1px solid #DDDDDD !important;
}
#userpermissions_table td{
    text-align:center !important;
    padding-left: 20px !important;
}
#userpermissions_table th{
    padding-top: 12px;
}


#userpermissions_table .checkbox{
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
}


.arstable th{
    font-size:12px;
    padding: 5px !important;
}
.arstable td{
    padding: 5px !important;
}

.purple .navbar {background: #301D6E !important; }   
.purple .btn:not(.btn-link) {background: #301D6E !important; }
.purple .btn {background: #301D6E !important;color:#B5B7D4 !important; }            
.purple .panel-heading {background: #B5B7D4 !important;color: #301D6E!important; }  
.purple .modal_title_bg {background: #301D6E !important;color:#B5B7D4 !important; }
.purple .form-control_new {border-bottom: 1px solid #301D6E !important; }
.purple textarea {border-bottom: 1px solid #301D6E !important; }
.purple .styled-select {background: #301D6E !important;color:#B5B7D4 !important; }
.purple .styled-select select option {background: #301D6E !important;color:#B5B7D4 !important; }
.purple #progressbar2 .progress-bar{ background-color: #301D6E !important;}
.purple #mainlocindicator {color: #301D6E !important; }   
.purple .radio input[type=radio]:checked~.check {background-color: #301D6E !important; }
.purple .radio input[type=radio]:checked~.circle {background-color: #B5B7D4 !important;border-color: #301D6E !important; }
.purple .user_photo {border: 1px solid #301D6E !important; background-color:#301D6E  } 
.purple .usericon img {border: 1px solid #301D6E !important; background-color:#301D6E  } 
.purple .subheader{ background-color: #B5B7D4 !important;}
.purple .circle-sm {border: 0px solid #301D6E !important; background-color:#301D6E  }
.purple .info th {background: #301D6E !important;color:#B5B7D4 !important; }
.purple .desktop_badge_pointtypelist {background: #B5B7D4 !important;color:#301D6E !important; }
.purple .innermenuicon { color: #301D6E !important;}

.pupple .well{border:1px solid #301D6E !important;}
.purlpe .group_name{color: #301D6E !important;}
.purple .deskview-group_addnew{color: #301D6E !important;}
.purple_well {color: #301D6E !important;border:1px solid #301D6E !important;}

.sleekButton{
    position: relative;
    padding: 8px 30px;
    border: 0;
    margin: 10px 1px;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,.84);
    -webkit-transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
    transition: box-shadow .28s cubic-bezier(0.4,0,.2,1);
    outline: 0 !important;
}


.header2 {
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    padding: 5px;
    background-color: #dff0d8;
    margin-bottom: 10px;
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid #0f9d58;
    text-transform: uppercase;
}

.header2:hover {
    -webkit-filter: brightness(80%);
}

.studentPageText {
    font-size: 24px;
}

.selCheckStudentDiv {
    line-height: 1.1;
    height: 70px;
    border-bottom: 2px solid #d9d9d9;
    cursor: pointer;
}

.selCheckStudentEmoji {
    float: left;
    font-size: 50px;
    padding-top: 10px;
    padding-left: 10px;
}

.selCheckStudentDescriptionDiv {
    width: calc(100% - 85px);
    float: left;
    padding-left: 10px;
    padding-top: 10px;
}

.selCheckStudentArrow {
    float: right; 
    font-size: 25px; 
    color: #d9d9d9; 
    position: relative; 
    top: 25px; 
    right: 10px;
}

.notTimeYet {
    background-color: white !important;
    color: #bfbfbf;
    border: 2px dotted #bfbfbf;
}

.notTimeYet:hover {
    border: 2px dotted #bfbfbf !important;
    -webkit-filter: brightness(100%) !important;
}

.notTimeYet>div>i>i{
    color: white;
}

.btn-success>div>i>i {
    color: #0f9d58;
}

#availableInText:hover {
    -webkit-filter: brightness(100%);
}

.primary{
    color: #fff !important;
    background-color: #428bca !important;
    border-color: #428bca !important;
}

.primary-select {background: #428bca !important;color:#fff !important; }
.primary-select select option {background: #428bca !important;color:#fff !important; }
.primary-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(../images/down_arrow_select_primary.jpg) no-repeat right #428bca !important;
   color:white;
   border-radius: 2px;
    margin:2px;
}

.desktop_badge_storeitem {
    background-color: var(--color-orange-dark-400);
    position: absolute;
    top: -15px;
    left: -10px;
    font-size: 17px;
    border: 1px solid white !important;
}

.desktop_badge_index {
    background-color: pink;
    color: red;
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 20px;
/*    border: 1px solid red !important;*/
}

.desktop_badge_menu {
    background-color: pink;
    color: red;
    position: absolute;
    padding: 3px !important;
    /* top: -15px; */
    right: 1px;
    margin-top: 0px !important;
    font-size: 24px !important;
    z-index: 350;
    /* border: 1px solid red !important; */
}

.desktop_badge_parent{
    background-color: pink;
    color: red;
    position: absolute;
    padding: 3px !important;
    /* top: -15px; */
    right: 1px;
    margin-top: 0px !important;
    font-size: 24px !important;
    z-index: 350;
    /* border: 1px solid red !important; */
}

.desktop_badge_message {
    background-color: var(--color-orange-dark-400) !important;
    color: white !important;
    position: absolute;
    top: 0px;
    right: 95px;
    font-size: 12px;
    min-width: 8px;
    padding: 1px 3px;
     border: 2px solid white !important;
    z-index: 500;
}

.desktop_badge_storeitem_desc {
    background-color: #03a9f4;
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 18px;
    border: 1px solid #03a9f4 !important;
    padding-bottom: 6px;
    padding-right: 4px;
}


.carttotal{
    width: 230px;
    background: #d9edf7;
    height: 38px;
    line-height: 30px;
    color: #31708f;
    font-weight: bold;
    border: 1px solid #03a9f4 !important;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    margin-bottom: -10px;
}

#user_home_my_photo{
    border-radius: 100% !important;
    height:130px !important;
    width:130px !important;
    margin-top:20px;
}

.menu_bar_icon_buttons{
    font-size:18pt;
}

.menu_bar_icon_buttons i,.menu_bar_icon_buttons a{
    cursor: pointer !important;
    padding-right:5px;
    text-decoration: none;
}

.menu_bar_icon_buttons i,.menu_bar_icon_buttons a:hover{
    opacity:1 !important; 
    filter:alpha(opacity=100) !important;
    cursor: pointer !important;
    text-decoration: none;
}

.dropdown-menu>li>a{
    display: block;
    padding: 1px 5px !important;
    clear: both;
    font-weight: 500;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.dropdown-menu>li>a:hover{
    color: var(--color-primary-500);
}

.remove_exception{
    
        width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    padding: 4px !important;
    margin-top: -2px !important;
}


#SchoolInfoMenu{
    float:left;
    width:15%;
    height:100% !important;
    display:block;
/*    padding-top:35px;*/
/*    padding-bottom:20px;*/
display: inline-table;
    background:#e5e5e5;
    position: relative;
    left:0px;
    border-right: 1px solid #31708F !important;
}

#SchoolInfoContent{
    position: relative;
    width:100%;
    height:100% !important;
    float:left;
}

.accordion {
    transform: scaleX(-1);
    margin: 0px 5px 15px 5px;
}

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
	padding: 0;
	border: none;
	outline: none;
    text-align: left;
}

.accordion li {
	list-style: none;
        
}

/* Sub Menu */

.sub-menu li a {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: #e5e5e5;
	border-bottom: 1px solid #c9c9c9;

	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
	color: #797979;
	text-shadow: 1px 1px 0px rgba(255,255,255, .2);
	background: transparent;
	border: 1px solid #c9c9c9;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.sub-menu em {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 14px;
	color: #a6a6a6;
	font: normal 10px/32px Arial, sans-serif;
}

/* Functionality */
.accordion li:target > .sub-menu {
	display: block;
}


.selected_setting{
    background: url(../images/currentsetting.png) no-repeat right #E2F5FE !important;
    margin-right:-1px !important;
    color:#31708f !important;
}

.selected_badge_screen{
    background:#f9f9f9;
    border: 2px solid #bfbfbf;
    height:340px;
    width:100%;
    
}


.badge_tab{
    margin:0px !important;
    
}


.fadeButton{
    color: #bfbfbf;
    background-color: #f9f9f9;
    border: none;
}

.unfadeButton{
    color: var(--color-primary-500);
    background-color: #f9f9f9;
    border: 2px solid #bfbfbf;
    padding: 5px;
    padding-bottom: 2px;
    border-bottom: 2px solid #f9f9f9;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.notPresent{
    background: #eaeaea;
}

.hallPass{
    background: #fafafa;
}

/*hiding hall pass features for schools
that have not bought the hall pass plus feature
or were not grandfathered into hall pass basic*/
.hideHallPass{
    display:none !important;
}
.hideHallPassExtras{
    display:none !important;
}

.edititemfieldset{

    float: left;
    text-align: left;
    /*padding: .35em .625em .75em;*/
    margin: 0 2px;
    border: 2px solid var(--color-gray-50);
}

.edititemfieldset label{
    float:left;
    text-align: right !important;
    width: 60px;
}

.edititemfieldset .form-control_new{
    
    width: 100px;
    
}

.rep_search_results{
  position: absolute;
  width: 250px !important;
  text-align: center;
}

/* ALL MEDIA SIZES GO HERE !!! */
@media only screen and (max-width : 1025px) {
    .truncate250 {
      width: auto;
      max-width: 255px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #grouptitle {
        font-size: 12px !important;
        float: right !important;
        width: 200px !important;
    }
}

/*This is the start of the image modal popup styling*/
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,.75); /* Black w/ opacity */
    margin-top:40px
}

/* Modal Content (image) */
.modal-content2 {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.modalTableHeader{
    padding:15px;
    background-color: #0f9d58;
/*    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; */
}

.modalTableBody{
    background-color: #ffffff;
    color:#0f9d58;
    border: 1px solid #0f9d58;
}
/* Caption of Modal Image */
.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
    height: 150px;
}

/* Add Animation */
.modal-content2, .caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close2 {
    position: absolute;
    top: 15px;
    right: 30px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    opacity: .75;
}

.close2:hover,
.close2:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content2 {
        width: 100%;
    }
}

.staff_circle_pic{
    border-radius: 100%;
    height:200px !important;
    width:200px !important;
    margin-top: -8px !important;
    box-shadow: 2px 2px 2px #888888;
}


.stuProfileHeader{
    background-color: #0f9d58;
    padding: 30px;
    border-radius: 46px; 
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    display:inline-block; 
    margin-top:35px
}

#flip_button{
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    position: absolute;
    left: 315px;
    margin-top: 10px;
}

#scrollToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(0,0,0,.5);
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  height: 70px;
  font-size: 48px;
  
}
#scrollToTop:hover {
  background-color: #555;
}

.override_options {
    border: 1px solid silver;
    width: 400px;
    padding: 10px;
    padding-top: 0px;
    font-size:12px;
    float: left;
    margin:10px;
    height:225px;
}


@media print {
/*  * {
    display: none;
  }*/
  #eligibleStudentList {
    display: block;
  }
}

select {
/*    -webkit-appearance: none;*/
    -moz-appearance: none;
/*    text-indent: 0.01px;
    text-overflow: '';*/
}

#migrateexp_message{
    padding: 10px;
    font-size: 12px;
    text-align: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    color:white;
}

#migrateexp_message_warning{
    padding: 10px;
    font-size: 12px;
    text-align: center;
    color:white;
}

.expectations_steps{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    text-align: left;
}


/*.styledToolTip:hover:after{*/
.styledToolTip{
    right:0px;
    margin-left:70px;
    padding: 5px;
    border:2px solid #31708f;
    background:#E2F5FE;
    color: #31708f;
    
}

.tooltip{
    margin-left:3px;
}
.tooltip-inner {
    background:var(--color-gray-50);
    color: var(--color-primary-500);
    border:2px solid var(--color-primary-500);
    margin-top:7px;
    
}

.tooltip.top .tooltip-arrow {
  border-top-color: #31708f;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #31708f;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #31708f;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #31708f;
}


.btn-orange:not(.btn-link) {
    background-color: orange;
    color:white !important;
}


/* THIS OVERWRITES THE MATERIAL DESIGN CSS */
.nav-tabs{
    background: initial;
}
.nav-item{
    color:initial;
}

.nav-tabs>li>a {
color: #428bca;
border: initial;
margin: initial;
}

.nav-tabs>li>a:hover {
color: #428bca;
border: initial;
margin: initial;
}
    
    
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555 !important;
    cursor: default !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-bottom-color: transparent !important;
}

.error_tooltip{
    float: left;
    padding: 3px;
    border: 1px solid red;
    color: red;
    border-radius: 3%;
    margin-left: 10px;
    margin-top: -10px;
    padding:10px;
}

.greengo_tooltip{
    float: right;
    margin-left: 10px;
    margin-top: 4px;
    font-size: 22px !important;
}

.commentNumber{
    text-align: center !important;
    border-width: 0px;
    cursor: pointer;
    font-size: 17px;
    width: 100px;
    height: 35px;
    padding-top: 4px;
}

.cicoHeader{
    text-align: left;
    color: black;
    font-weight: 900;
    width:100%;
    margin-bottom: 0px;
}

.calendarOFF{
    background-color: lightgrey !important;
}

/* The switch - the box around the slider */
.switchTo {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switchTo input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #03a9f4;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.cicoprogresscomments {
    text-align: left !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    width:170px;
    vertical-align:top !important;
}

.group_menus{
    display:none;
    margin: 6px 0;
    /*display: flex;*/
    flex-direction: column;
    gap: 6px;
}


#group_activities  > li{
    padding-top: 5px;
    padding-bottom: 5px;
}

.group_random_winner{
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
    position: relative;
    height: 200px;
    width: 150px;
    border: 1px solid #03a9f4 !important;
    border-radius: 10px !important;
}

.group_random_winner>.name_box{
    bottom: 0px;
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0px;
}

.group_random_winner>.userImage{
    position:absolute !important;
    height:100px;
    width:100px;
    left: 0px;
    right: 0px;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.landingpage_logo{
    width:300px;
    height:96px;
    background:white;
    margin-left:auto;
    margin-right:auto;
}

.landingpage_awardedtoday_container{
    text-align: left;
    line-height: 36px;
    float:left;    
    margin-left: 10px;
}

.landingpage_awardedtoday_value{
    color:#03a9f4;
    font-weight:bold;
}

.landingpage_goal_container{
    text-align: left;
    line-height: 36px;
    float:left;
    padding-left: 10px;
}

.landingpage_goal_value{
    color:#03a9f4;
    font-weight:bold;
}

.landingpage_subtitle_label{
    color:#03a9f4;
    font-weight:bold;
    font-size:22px;
}

.landingpage_tt_container{
    width:95%;
    margin-left:10px;
    margin-right:10px;
    background:white;
    height:160px;
    text-align: left;
    padding:10px;
    /*border: 1px solid #C0C0C0 !important;*/
    border-radius: 4px;
    font-size:12px;
    position: relative;
}

.landingpage_tt_title{
    font-weight:bold;
    display:block;
    color:#262729;
}

.landingpage_tt_link{
    float:right;
    bottom:5px;
    margin-right:5px;
    display:block;
    position: absolute;
    right:5px;
}

.landingpage_tt_link:hover{
    text-decoration: underline;
}

.landingpage_tt_article{
    display:block;
    font-style: italic;
    color: #343333;
}


.lpwatermark{
    opacity: 0.25!important;
    filter: alpha(opacity=25) !important;
}

.landingpage_reward_button{
    display:none;
}



/* Style time text */
.time-right {
    float: right;
    color: white;
}

/* Style time text */
.time-left {
    float: left;
    color: white;
}

.textarea-container {
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.invalid_date{
    background-color: red;
    color: white;
}

.LWSave{
    background: var(--color-primary-500) !important;
    color: #ffffff !important;
    border-radius: 10px;
    padding: 10px;
    width: 205px;
    border: 2px solid var(--color-primary-500)!important;
    font-weight: bold;
    font-size: 15px;
    box-shadow: none !important;
}

.LWSave[disabled]{
    border: 2px solid #dddddd !important;
}

.LWSave:hover, .LWSave:focus, .LWSave:focus{
    background: #ffffff !important;
    color: var(--color-primary-500) !important;
    border-radius: 10px;
    border: 2px solid var(--color-primary-500) !important;
    box-shadow: none !important;
}

.LWPrimary{
    background: var(--color-primary-500) !important;
    color: #ffffff !important;
    border-radius: 10px;
    border: 2px solid var(--color-primary-500) !important;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    width: 205px;
    box-shadow: none !important;
}

.LWPrimary:hover, .LWPrimary:focus, .LWPrimary:focus{
    background: #ffffff !important;
    color: var(--color-primary-500) !important;
    border-radius: 10px;
    box-shadow: none !important;
}

.LWPrimary:disabled {
  border: 2px solid #dddddd !important;
}

.LWCreate{
    background: #ffffff !important;
    color: var(--color-success-600) !important;
    border-radius: 10px;
    border: 2px solid var(--color-success-600) !important;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    width: 205px;
    box-shadow: none !important;
    text-decoration: none;
}

.LWCreate:hover, .LWCreate:focus, .LWCreate:focus{
    background: var(--color-success-600) !important;
    color: #ffffff !important;
    border-radius: 10px;
    box-shadow: none !important;
}

.LWSecondary{
    min-width: 90px;
    background: #ffffff !important;
    color: var(--color-primary-500) !important;
    border-radius: 10px;
    border: 2px solid var(--color-primary-500) !important;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    width: 205px;
    box-shadow: none !important;
}

.LWSecondary:hover, .LWSecondary:focus, .LWSecondary:focus{
    background: var(--color-primary-500) !important;
    color: #ffffff !important;
    border-radius: 10px;
    box-shadow: none !important;
    /*border: 2px solid #ffffff;*/
}

.LWMinor{
    background: #ffffff !important;
    color: #999 !important;
    border-radius: 10px;
    border: 2px solid #999 !important;
    font-weight: bold;
    font-size: 15px;
    padding: 10px;
    /*min-width: 205px; */
    box-shadow: none !important;
}

.LWMinor:hover, .LWMinor:focus, .LWMinor:active{
    background: #999 !important;
    color: #ffffff !important;
    border-radius: 10px;
    box-shadow: none !important;
}

.LWSelect {
    height: 32px;
    color: #757575;
    background-color: white;
}

.StartLaunchButton {
    background: var(--color-success-600) !important;
    color: white !important;
    border-radius: 10px;
    padding: 10px;
    width: 225px;
    box-shadow: none !important;
    border: 2px solid var(--color-success-600) !important;
}

.StartLaunchButton:hover, .StartLaunchButton:focus, .StartLaunchButton:focus {
    background: #ffffff !important;
    color: var(--color-success-600) !important;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    box-shadow: none !important;
}

.StartLaunchButton:hover .cls-1{
    fill:var(--color-success-600)
}

.cls-1{
    fill:white;
}

.supportLink{
    text-decoration: none !important;
    color: var(--color-primary-500) !important;
    cursor: pointer;
}

.supportLink:hover{
    text-decoration: none;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  background-color: #f1f1f1;
  z-index: 1;
  float: right;
  margin-top: 26px;
  width: 190px;
  border-radius: 5px;
  border: 2px solid #ec1f26;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/*.dropdown-nobackground a:hover {background-color: inherit;}*/

.show {display: block;}

.districtEditUser {
    float: right;
    display: inline-flex;
    margin-top: 4px;
}

.districtTableData {
    border: 2px solid #d9d9d9;
}

.districtTableData thead{
    background: #d9d9d9;
}

.districtTableData td{
    border: 2px solid #d9d9d9;
}

.isClickable:hover{
    box-shadow: 0px 0px 2px 2px #888888;
}

a.btn-info.District:hover{
     background-color: white;
     border: 2px solid #03a9f4 !important;
     color: #03a9f4;
     box-shadow: none !important; 
}

.btn-info.District:not(.btn-link) {
    border-radius: 10px;
    border: 2px solid #03a9f4;
}

.btn-info.NotAvail:not(.btn-link) {
    border-radius: 10px;
    border: 2px solid gray;
}

a.btn-info.NotAvail:hover{
     background-color: white !important;
     border: 2px solid gray !important;
     color: gray;
     box-shadow: none !important; 
}

a.btn-info.NotAvail:focus{
     background-color: white !important;
     border: 2px solid gray !important;
     color: gray;
     box-shadow: none !important; 
}

a.btn-info.NotAvail:active{
     background-color: white !important;
     border: 2px solid gray !important;
     color: gray !important;
     box-shadow: none !important; 
}


/* --- In session calendar --- */
.inSession {
    background: transparent;
}
.out-span-start{
    background: url('../images/calendar-preview-out-start.png') no-repeat center center !important;
    background-size: 38px 37px !important;
    margin-left: 3px !important;
    margin-right: -1px !important;
    border-radius: 0px !important;
    cursor:default !important;
}
.out-span-middle{
    background: url('../images/calendar-preview-out-middle.png') no-repeat center center !important;
    background-size: 50px 37px !important;
    margin-left: 3px !important;
    margin-right: -1px !important;
    border-radius: 0px !important;
    cursor:default !important;
}
.out-span-end{
    background: url('../images/calendar-preview-out-end.png') no-repeat center center !important;
    background-size: 38px 37px !important;
    margin-left: -1px !important;
    margin-right: 3px !important;
    border-radius: 0px !important;
    cursor:default !important;
}

.datepicker td.calendarDay.active.active, .datepicker td.calendarDay.active.active:hover{
    /*border-radius: 25px;*/
    border-radius: 5px;
}

.inSessionCalendar td{
    /*background-size: 50px 37px !important;*/
}
.inSessionCalendar td.out{
    background: url('../images/calendar-preview-out-one.png') no-repeat center center !important;
    background-size: 37px !important;
    cursor: default !important;
}
/*turning an out of session day to an insession day
get rid of the X and a blue background*/
.inSessionCalendar td.out.active{
    background: url('') no-repeat center center !important;
    background-size: 37px !important;
    cursor: default !important;
    background-color: var(--color-primary-500) !important;
}
.inSessionCalendar td.out.active:hover{
    color:black !important;
}
/*turning an in session day to an out of session day
show the X and a blue background*/
.inSessionCalendar td.inSession.active{
    background: url('../images/calendar-preview-out-one-trans.png') no-repeat center center !important;
    background-size: 37px !important;
    cursor: default !important;
    background-color: var(--color-primary-500) !important;
}
.inSessionCalendar td.inSession.active:hover{
    background-color: var(--color-gray-50) !important;
    color: black !important;
}

.inSessionCalendar:before, .inSessionCalendar:after{
    display: none !important;
}
.inSessionCalendar .prev, .inSessionCalendar .next{
    background-color: var(--color-gray-50);
    border-radius: 0px;
    visibility: visible !important;
}
.inSessionCalendar th.dow:not(:first-child){
    background-color: var(--color-gray-50);
    border-radius: 0px;
    border-top: 2px solid #d9d9d9 !important;
    border-left: 2px solid #d9d9d9 !important;
}
.inSessionCalendar th.dow:first-child{
    background-color: var(--color-gray-50);
    border-radius: 0px;
    border-top: 2px solid #d9d9d9 !important;
    border-left: none !important;
}
.inSessionCalendar thead th{
    color: #262729;
    text-align: center !important;
    border: none;
    /*background-color: #fff;*/
    background-color: var(--color-gray-50);
    border-radius:0px;
    pointer-events:none;
}

/*"@-moz-document url-prefix" is firefox specific 
border-collapse creates the weird vertical lines in firefox.*/
@-moz-document url-prefix(){
    .inSessionCalendar table{
        border-collapse: separate;
    }
}

.calendarToday{
    /*border: 3px solid #fedb99;*/
    background-color: var(--color-primary-500);
    border-radius:5px;
    color: white !important;
}
.calendarToday:hover{
    /*border: 3px solid #fedb99;*/
    color: black !important;
}

.datepicker td.day.calendarDay.disabled {
    color: var(--color-gray-400);
    /*background: white;*/
}

.datepicker td.day.calendarDay:hover {
    background: #eeeeee;
    cursor: pointer;
    /*border-radius: 25px;*/
    border-radius: 5px;
}
.datepicker td.day.calendarDay.out:hover{
    background: #eeeeee;
    cursor: pointer;
    border-radius: 5px;
    background-color: var(--color-gray-50) !important;
    color: white;
}

.inSessionCalendar div.datepicker:before{
    content: none;
}

.datepicker thead tr:first-child th {
    cursor: text;
}

.datepicker thead tr:first-child th:hover {
    background: white;
}
/*  ------------------------   */

/*Events were broken when picking a date, but this fixes it.*/
.datepicker{
    z-index: 2000 !important;
}

.datepicker0 {
    z-index: 0 !important;
}

/*EOY Report Dashboard*/
.eoyDisableReport .panel-body a{
    opacity: .5 !important;
}

.eoyDisableReport i:first-of-type{
    color: #bdbdbd !important;
}

/*Launch Wizard Fieldsets*/
.panel-info-launch>.panel-heading {
    color: #262729;
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-50);
}

.lw-module-container {
    margin: 1rem 1rem;
    width: 90%;
    background-color: white;
    border-radius: 10px;
    border: 2px solid var(--color-gray-50);
}

.lw-module-header {
    background-color: var(--color-gray-50);
    grid-area: header;
    padding: 0 1rem;
    border-radius: 5px 5px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lw-module-header>p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.lw-module-content{
    text-align: center;
    padding: 20px 15px 20px 15px;
}

.confirmStudentData{
    width: initial;
}

input.req_billingaddress, select.req_billingaddress, input.req_schoolinfo, select.req_schoolinfo, input.LWschoolinfo, select.LWschoolinfo{
    height: 55px;
    font-size: 14px;
}

.lw-module-container select, .lw-module-container input:not(.input-checkboxlaunch):not(.input-radiobutton){
    height: 47px;
    font-size: 14px;
    border: 2px solid var(--color-gray-100);
    border-radius: 12px;
    color: #343333;
    background-color: white;
    padding: 12px;
    text-indent: 1px;
    width: 100%;
}

.lw-module-container select:focus, .lw-module-container input:not(.input-checkboxlaunch):not(.input-radiobutton):focus{
    outline: white;
    border: 2px solid var(--color-gray-100);
}

.grading_periods_table th{
    background-color: inherit;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
}

@media only screen and (max-width: 1620px) {
    #start-animation_container,#animation_container{
        margin-left: auto;
        margin-right: auto;
        float:none !important;
        width: 535px !important;
    }
    
    /*#launchInstructions{
        height: 500px;
        width: 535px !important;
        margin: auto;
        text-align: center;
        float:none !important;
        margin-top:15px !important;
    } */

    #launchInstructions {
        float: left;
        margin-top: 100px;
        padding: 10px;
        height: 500px;
        text-align: center;
        width: 100%; /* Ensure parent container takes full width */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #launchInstructions ul {
        padding: 0;
        text-align: left !important; /* Align text within the list items to the left */
    }
    
    #LaunchSchoolButton2{
        margin: auto;
        float:none !important;
    }
}

#gp_academic_option .input-radiobutton, #exp_type_container .input-radiobutton{
    border: 2px solid var(--color-gray-100);
}

.lw-delete-button{
    border: none;
    background-color: #ffffff;
    color: var(--color-error-500);
}

.lw-delete-button i{
    font-size: 30px !important;
}

.lw-module-header .button-icon{
    color: #808080;
    width: auto;
    height: auto;
}

.lw-delete-button:focus{
    outline: none;
}

.selectLW{
    -webkit-appearance: none;
}

/*@media only screen and (max-width: 1200px) {
    .LWvideo{
        height:20% !important;
    }
}*/

.LWDisableSelect{
    border: 1px solid #bfbfbf !important;
    background-color: #fafafa !important;
    pointer-events: none !important;
}

.LWvideo {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.LWvideo iframe,
.LWvideo object,
.LWvideo embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*@-moz-document url-prefix() is only used on firefox*/
@-moz-document url-prefix(){
    table{
        border-collapse: separate;
    }
}

.hp-locations {
    padding: 15px;
    border: 1px solid #bfbfbf;
    border-radius: 15px;
    margin-bottom: 10px;
}

.hp-locations:hover {
    background-color: #E6F2F4;
    box-shadow: 0 0 5px #007E8F;
    border-color: #007E8F;
    cursor: pointer;
}

.hpButtonPrimary{
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-content: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 12px;
    border: 1px solid var(--Gray-100, #D9DCDD);
    background: var(--Gray-25, #F4F5F5);
    color: var(--Gray-500, #29353D);
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

.hpButtonSecondary {
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-content: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 12px;
    border: 1px solid var(--Gray-100, #D9DCDD);
    background: var(--Base-White, #FFF);
    color: var(--Gray-500, #29353D);
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

.hpHideGrade {
    display:none !important;
}