body {
    margin: 0px;
    padding: 0px;
}
form {
    margin: 0px;
    padding: 0px;
}
h1 {
    font: 14pt Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}
h2, h3, h4, h5, h6 {
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    margin-bottom: 0px;
}
input, textarea, select, checkbox {
    font: 10pt Verdana, Arial, Helvetica, sans-serif; color: #000000;
}
textarea:disabled{
    background-color:lightgray;
    border:1px solid lightgray;
}
p, td, li {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
}
/* One thing to consider is using the @media queries, but those get complicated
@media only screen and (max-width: 480px), only screen and (max-device-width:480px){
    .input_label_small{
        
    }
    //etc.
}
 */
.button, input[type="submit"], input[type="button"]{ 
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: black;
}
li.sortable {
   border: 1px solid #000000;
   margin: 0.2em;
   padding: 0.2em;
   cursor: move;
}

li.sortableDisabled {
   background-color: #DDDDDD;
   border: 1px solid #000000;
   margin: 0.2em;
   padding: 0.2em;
   cursor: move;
}


.fixed { font-family: "Courier New", Courier, monospace, serif; font-size: 10pt; font-style: normal}


.small_header > a,
.small_header_normal > a,
.small_header_with_border > a,
.medium_header > a,
.medium_header_normal > a,
.medium_header_with_border > a,
.small_header > a:hover,
.small_header_normal > a:hover,
.small_header_with_border > a:hover,
.medium_header > a:hover,
.medium_header_normal > a:hover,
.medium_header_with_border > a:hover,
.small_header > a:visited,
.small_header_normal > a:visited,
.small_header_with_border > a:visited,
.medium_header > a:visited,
.medium_header_normal > a:visited,
.medium_header_with_border > a:visited,
.small_header > a:active,
.small_header_normal > a:active,
.small_header_with_border > a:active,
.medium_header > a:active,
.medium_header_normal > a:active,
.medium_header_with_border > a:active {color: #333366; text-decoration: underline}

.smallest_subheader > a,
.smallest_subheader_with_border > a,
.small_subheader > a,
.small_subheader_off_with_border > a,
.small_subheader_off > a,
.small_subheader_stand_out > a,
.small_subheader_with_border > a,
.medium_subheader > a,
.medium_subheader_medium > a,
.medium_subheader_normal > a,
.medium_subheader_normal_with_border > a,
.medium_subheader_with_border > a,
.smallest_subheader > a:hover,
.smallest_subheader_with_border > a:hover,
.small_subheader > a:hover,
.small_subheader_off_with_border > a:hover,
.small_subheader_off > a:hover,
.small_subheader_stand_out > a:hover,
.small_subheader_with_border > a:hover,
.medium_subheader > a:hover,
.medium_subheader_medium > a:hover,
.medium_subheader_normal > a:hover,
.medium_subheader_normal_with_border > a:hover,
.medium_subheader_with_border > a:hover,
.smallest_subheader > a:visited,
.smallest_subheader_with_border > a:visited,
.small_subheader > a:visited,
.small_subheader_off_with_border > a:visited,
.small_subheader_off > a:visited,
.small_subheader_stand_out > a:visited,
.small_subheader_with_border > a:visited,
.medium_subheader > a:visited,
.medium_subheader_medium > a:visited,
.medium_subheader_normal > a:visited,
.medium_subheader_normal_with_border > a:visited,
.medium_subheader_with_border > a:visited,
.smallest_subheader > a:active,
.smallest_subheader_with_border > a:active,
.small_subheader > a:active,
.small_subheader_off_with_border > a:active,
.small_subheader_off > a:active,
.small_subheader_stand_out > a:active,
.small_subheader_with_border > a:active,
.medium_subheader > a:active,
.medium_subheader_medium > a:active,
.medium_subheader_normal > a:active,
.medium_subheader_normal_with_border > a:active,
.medium_subheader_with_border > a:active {color: #333366; text-decoration: underline}

A          { color: #333366; text-decoration: underline }
A:visited  { color: #333366; text-decoration: underline }
A:hover    { color: #333366; text-decoration: underline  }
A:active   { color: #333366; text-decoration: underline  }
A.oasis_color_1          { color: #333366; text-decoration: underline }
A.oasis_color_1:visited  { color: #333366; text-decoration: underline }
A.oasis_color_1:hover    { color: #FF6600; text-decoration: underline  }
A.oasis_color_1:active   { color: #FF6600; text-decoration: underline  }
A.oasis_color_2          { color: #333366; text-decoration: underline }
A.oasis_color_2:visited  { color: #333366; text-decoration: underline }
A.oasis_color_2:hover    { color: #FF6600; text-decoration: underline  }
A.oasis_color_2:active   { color: #FF6600; text-decoration: underline  }
A.oasis_color_3          { color: #333366; text-decoration: underline }
A.oasis_color_3:visited  { color: #333366; text-decoration: underline }
A.oasis_color_3:hover    { color: #FF6600; text-decoration: underline  }
A.oasis_color_3:active   { color: #FF6600; text-decoration: underline  }

A.no_decoration          { color: #333366; text-decoration: none }
A.no_decoration:visited  { color: #333366; text-decoration: none }
A.no_decoration:hover    { color: #333366; text-decoration: none  }
A.no_decoration:active   { color: #333366; text-decoration: none  }

A.red_link          { color: #ff0000; text-decoration: none }
A.red_link:visited  { color: #ff0000; text-decoration: none }
A.red_link:hover    { color: #ff0000; text-decoration: none  }
A.red_link:active   { color: #ff0000; text-decoration: none  }


.important {
    background-color: #FFFF99;
    font: bold 10pt Verdana, Arial, Helvetica, sans-serif;
}
.red {
    color: #ff0000 !important;
}
.yellow{
    color: #FFFF99;
}
.gray{
    color: #cccccc;
}
.lightgray{
    color: #eeeeee;
}
.darkgray{
    color: #666666;
}
.green{
    color: #008000;
}
.white {
    color: #ffffff;
}
.black{
    color: #000000;
}
.underline{
    text-decoration:underline;
}
.strike{
    text-decoration:line-through;
}
.bg_blue {
    background-color: #FFFFFF;
    color: #000000;
}
.bg_yellow {
    background-color: #FFFF99;
}
.bg_lightyellow {
    background-color: #FFFFCC;
}
.bg_red {
    background-color: #CC0000;
}
.bg_lightred{
    background-color: #FFCCCC;
}
.bg_lightblue {
    background-color: #B9CB77;
    color: #000000;
}
.bg_lightestblue {
    background-color: #EEF6FF;
    color: #000000;
}
.bg_green{
    background-color: #008000;
}
.bg_lightgreen{
    background-color: #CCFFCC;    
}
.bg_gray {
    background-color: #cccccc;
}
.bg_lightestgray {
    background-color: #eeeeee;
}
.bg_faintgray{
    background-color: #F6F6F6;
}
.bg_white{
    background-color: #FFFFFF;
}
*.highlight_gray_on_hover:hover{
    background-color: #eeeeee;
}
*.highlight_white_on_hover:hover{
    background-color: #ffffff;
}
*.popout_on_hover{
    transition: all 0.25s ease-in-out;
}
*.popout_on_hover:hover{
    transform: scale(1,1.0025);
    box-shadow: 3px 3px 3px 0px #cccccc;
}
.popout_on_hover.border_bottom:hover{
    border: 1px solid #cccccc;
}
*.highlight_selected_input input:checked + div{
    background-color:#cccccc;
}
.yellow_highlight_box{
    box-shadow: 0 0 5px #FFFF99;
    display:inline-block;
}
.blue_highlight_box{
    box-shadow: 0 0 5px #FFFFFF;
    display:inline-block;
}
.red_highlight_box{
    box-shadow: 0 0 5px #CC0000;
    display:inline-block;
}
.green_highlight_box{
    box-shadow: 0 0 5px #008000;
    display:inline-block;
}
.box_shadow_gray{
    box-shadow: 0 0 5px #cccccc;
}
.bordered{
    border: 1px solid #cccccc;
}
.border_bottom{
    border-bottom:1px solid #cccccc;
}
.border_top{
    border-top:1px solid #cccccc;
}
.border_left{
    border-left:1px solid #cccccc;
}
.border_right{
    border-right:1px solid #cccccc;
}
.border_bottom_right{
    border-width:0 1px 1px 0;
    border-style: solid;
    border-color: #cccccc;
}
.border_top_left{
    border-width:1px 0 0 1px;
    border-style: solid;
    border-color: #cccccc;
}
.border_curve{
    -moz-border-radius:0.3em;
    -webkit-border-radius:0.3em;
    border-radius:0.3em;
}
.curve2{
    -moz-border-radius:2.5em;
    -webkit-border-radius:2.5em;
    border-radius:2.5em;
}
.curve3tl{
    -moz-border-top-left-radius:3em;
    -webkit-border-top-left-radius:3em;
    border-top-left-radius:3em;
}
.curve3tr{
    -moz-border-top-right-radius:3em;
    -webkit-border-top-right-radius:3em;
    border-top-right-radius:3em;
}
.curve5px{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.breadcrumb {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}

/* Start DHTMLX custom CSS */
/* active window */
.dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_body_outer {
	position: absolute;
	overflow: hidden;
	left: 0px;
	top: 0px;
	background-color: #B9CB77;
	background-repeat: repeat-x;
	background-position: top;
	border: #a4bed4 1px solid;
}
.dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active div.dhtmlx_wins_body_outer div.dhtmlx_wins_body_inner {
	position: absolute;
	overflow: hidden;
	
	aborder: #B9CB77 5px solid;
	aborder: #a4bed4 1px solid;
	aborder-top: none;
	
	background-color: #ebebeb !important;
	border: #ebebeb 2px solid !important;
}
.dhtmlx_skin_dhx_skyblue div.dhtmlx_window_active .dhtmlx_wins_no_header { /* will added to div.dhtmlx_wins_body_inner in case of no header */
	border-top: #B9CB77 6px solid !important;
}

	/* DHTMLXGrid custom CSS*/
div.gridbox_dhx_custom .odd_dhx_custom{
	background-color: #EEF6FF;
}
	/* End DHTMLXGrid custom CSS*/
	/* DHTMLXTabBar custom CSS */
.dhx_tabcontent_zone{
	border:1px solid #B9CB77;
	z-index:2;
}


    /* End DHTMLXTabBar custom CSS */

.invert_element{
    -webkit-filter: invert(100%) hue-rotate(180deg);
    filter: invert(100%) hue-rotate(180deg);
}

/* End DHTMLX custom CSS*/

.req_question {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: #0000ff;
}

.oasis_badge{
    display:inline-block;
    border:1px solid #B9CB77;
    background-color: #eeeeee;
    color:black;
    overflow-x: hidden;
}

.oasis_studentbadge{
    width:300px;
    display:inline-block;
    min-height:24px;
}

.oasis_tab{
    color:#000000;
    background-color:#EEF6FF;
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    /*Probably best to let them pick their own width/height for now*/
    /* width:177px;
    height:35px;*/
    border:1px solid #cccccc;
    border-top-right-radius:8px;
    border-top-left-radius:8px;
    border-width:1px 1px 0 1px;
    margin-bottom:-1px;
    margin-left:1px;
}
.oasis_tab:hover{
    background-color: #B9CB77;
    color: #000000;
}
.inline_block{
    display:inline-block;/*yes, this is overkill*/
    zoom:1;
    *display: inline;/* Ugly IE7 CSS hack*/
}
/*
.display_grid_2_column{
    display: -ms-grid;
    display:grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:50% 50%;
    /* gap: 5px; */
}
*/
/* IE 10 and 11 do not support standard CSS Grid features  (but we no longer support IE10/11) */
/*
.display_grid_2_column div:nth-child(2n) {
    -ms-grid-column:2;
    -ms-grid-row-span:1;
}
.display_grid_2_column div:nth-child(2n+1) {
    -ms-grid-column:1;
    -ms-grid-row-span:1;
}
*/
.pad1{
    padding:1px;
}
.pad3{
    padding:3px;
}
.pad5{
    padding:5px;
}
.padBottom5{
    padding-bottom:5px;
}
.pad7{
    padding:7px;
}
.pad10{
    padding:10px;
}
.padBottom7{
    padding-bottom:7px;
}
.padBottom10{
    padding-bottom:10px;
}
.padLeft10{
    padding-left:10px;
}
.padLeft15{
    padding-left:15px;
}
.padLeft20{
    padding-left:20px;
}
.padBottom20{
    padding-bottom:20px;
}
.padRight10{
    padding-right:10px;
}
.padRight15{
    padding-right:15px;
}
.padRight20{
    padding-right:20px;
}
/*
Duplicate of above classes, but lower case.
At some point, I started typing the classes all lower-case.
In HTML4, CSS classes aren't case-sensitive, so it worked.
In HTML5, they ARE case-sensitive.
This fix is easier than correcting all of the mistakes.
There are over 100 places that use some variation of "padleft" alone.
 */
.padbottom7{
    padding-bottom:7px;
}
.padbottom10{
    padding-bottom:10px;
}
.padleft10{
    padding-left:10px;
}
.padleft15{
    padding-left:15px;
}
.padleft20{
    padding-left:20px;
}
.padbottom20{
    padding-bottom:20px;
}
.padright10{
    padding-right:10px;
}
.padright15{
    padding-right:15px;
}
.padright20{
    padding-right:20px;
}
/* Any element that contains a checkbox and a text label
 *  Note: It's probably best to apply this to a <label> element, but not required.
 */
.checkbox_container{
    display:inline-block;
    min-width:100px;
    cursor:pointer;
}
.checkbox_container :nth-child(1){
    display:inline-block;
    min-width:14px;
    max-width:9%;
    box-sizing:border-box;
    vertical-align:top;
}
.checkbox_container :nth-child(2){
    display:inline-block;
    max-width:90%;
    min-width:75px;/* 75 + 8 = 90% => min-width=84px */
    padding-left:8px;
    box-sizing:border-box;
    vertical-align:top;
}
.border_box{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.content_box{
    box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}
.page_break_before{
    page-break-before:always;
}
.page_break_after{
    page-break-after:always;
}
.no_page_break{
    page-break-inside:avoid;    
}
.float_right{
    float:right;
}
.float_left{
    float:left;
}
.align_right{
    text-align:right;
}
.align_left{
    text-align:left;
}
.align_center{
    text-align:center;
}
.hideOverflow{
    position:relative;
    max-height:50px;
    min-height:15px;
    overflow-y:hidden;
}
.hideOverflow > div{
    display:inline-block;
    max-height:35px;
    overflow-y:hidden;
    overflow-x:hidden;
}
.requirement_not_met{
    background-color:#FFCCCC;
}
.requirement_met{
    background-color:#CCFFCC;
}
#save_changes{
    font-weight:bold;
    background-color: yellow;
    position:fixed;
    top:0px;
    width:100%;
    height:20px;
    z-index:500;
    text-align:center;
}

.removable{
    position:relative;
}
.removable > img {
    float:right;
}

.bold{
    font-weight:bold !important;
}

.italics{
    font-style:italic !important;
}
.superscript{
    vertical-align:super;
    font-size:75%;
}
.indent10{
    text-indent:10px;
}
.indent15{
    text-indent:15px;
}
.hanging_indent{
    padding-left:10px;
    text-indent:-10px;
}

.center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.right{
    text-align:right;
}

.half_transparent{
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity:0.5;
}
.three_quarter_transparent{
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity:0.75;
}
.fullscreen{
    display:block;
    position:fixed;
    top:0px;
    left:0px;
    width:101%;
    height:101%;
}
.loading_cursor{
    cursor:wait !important;
}
.label_top{
    vertical-align:top;
}
.label_middle{
    vertical-align:middle;
    margin-top:auto;
    margin-bottom:auto;
}
.input_label{
	display:inline-block;
	width:150px;
}
.input_label_short{
    display:inline-block;
    width:75px;
}
.input_label_medium{
    display:inline-block;
    width:130px;
}
.input_label_long{
    display:inline-block;
    width:225px;
}
.input_label_50perc{
    display:inline-block;
    width:50%;
}
.input_label_100perc{
    display:inline-block;
    width:100%;
}
.error {
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color:rgba(255,255,255,0.5);
    padding:1px;
    color: #CC0000;
}

.warning {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    color: #CC0000;
}

.footer {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
}

.medium {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
}
.medium_bold {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
}
.medium_off {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.medium_bold_off {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.small {
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
}
.smaller {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
}
.smallest {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
}

.section_path {
    font: bold 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
    margin-bottom: 0px;
}
.section_title {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
    margin-bottom: 0px;
}
.section_titlesmall {
    font: bold 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
    margin-bottom: 0px;
}

.old_section_title {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    margin-bottom: 0px;
}

.medium_header,
.medium_header select,
.medium_header input {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
}
.medium_header_normal {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
    border-bottom:5px solid transparent;
    box-sizing:border-box;
}
.medium_subheader_medium {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.medium_subheader {
    font: bold 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.medium_subheader_normal {
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.medium_on {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.medium_off {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.medium_off_bold {
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.medium_lightestgray {
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #eeeeee;
}
.noshow{
    visibility:hidden;
    display:none;    
}
.hidden{
    visibility:hidden;
}
.small_stand_out {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFF99;
}
.small_subheader_stand_out {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFF99;
}

.small_header {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
}
.small_subheader {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.small_subheader_off {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.small_header_normal {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
}
.small_on {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.small_on_bold {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.small_off {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.small_disabled {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #DDDDDD;
}
.small_off_bold {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.small_lightestgray {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #eeeeee;
}
.small_gray {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #cccccc;
}
.small_special {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFCC;
}
.small_special_bold {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFCC;
}
.small_green {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: #008000;
}
.small_red{
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: #CC0000;
}
.small_waiting {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCFFCC;
}
.small_waiting_bold {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCFFCC;
}

.small_failed {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCCCFF;
}
.small_failed_bold {
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCCCFF;
}

.away_elective {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #ffff99;
}

.oasis_odd_row {
    background-color: #EEF6FF;
}

.small_lightyellow {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFCC;
}

.small_lightyellow_disabled {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    color: #DDDDDD;
    background-color: #FFFFCC;
}

.rotateClockwiseQuarterTurn{
    -webkit-animation-name: spinClockwise90;
    -webkit-animation-duration: 250ms;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: spinClockwise90;
    -moz-animation-duration: 250ms;
    -moz-animation-fill-mode: forwards;

    -ms-animation-name: spinClockwise90;
    -ms-animation-duration: 250ms;
    -ms-animation-fill-mode: forwards;

    animation-name: spinClockwise90;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}

@-ms-keyframes spinClockwise90 { 
    from { 
        -ms-transform: rotate(0deg); 
    } to { 
        -ms-transform: rotate(90deg); 
    }
}
@-moz-keyframes spinClockwise90 { 
    from { 
        -moz-transform: rotate(0deg); 
    } to { 
        -moz-transform: rotate(90deg); 
    }
}
@-webkit-keyframes spinClockwise90 { 
    from { 
        -webkit-transform: rotate(0deg); 
    } to { 
        -webkit-transform: rotate(90deg); 
    }
}
@keyframes spinClockwise90 { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(90deg); 
    }
}
.rotateCounterClockwiseQuarterTurn{
    -webkit-animation-name: unspinClockwise90;
    -webkit-animation-duration: 250ms;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: unspinClockwise90;
    -moz-animation-duration: 250ms;
    -moz-animation-fill-mode: forwards;

    -ms-animation-name: unspinClockwise90;
    -ms-animation-duration: 250ms;
    -ms-animation-fill-mode: forwards;

    animation-name: unspinClockwise90;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}

@-ms-keyframes unspinClockwise90 { 
    from { 
        -ms-transform: rotate(90deg); 
    } to { 
        -ms-transform: rotate(0deg); 
    }
}
@-moz-keyframes unspinClockwise90 { 
    from { 
        -moz-transform: rotate(90deg); 
    } to { 
        -moz-transform: rotate(0deg); 
    }
}
@-webkit-keyframes unspinClockwise90 { 
    from { 
        -webkit-transform: rotate(90deg); 
    } to { 
        -webkit-transform: rotate(0deg); 
    }
}
@keyframes unspinClockwise90 { 
    from { 
        transform: rotate(90deg); 
    } to { 
        transform: rotate(0deg); 
    }
}


.overflow_span{
    overflow-y:auto;
    display:inline-block;
}
.height_150{
    max-height:150px;
}

#datePicker {position:absolute; 
             left:0px; 
             top:0px; 
             visibility:hidden
            }
#tableHeader {
              width:100%
             }
#today {
    font: bold 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color:#B9CB77;
}
#viewing {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color:#B9CB77;
}
#dpDay {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}
.dpDay {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
}

#dpoDay {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    color: #888888;
    background-color: #FFFFFF;
}
.dpoDay {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    color: #888888;
    background-color: #FFFFFF;
}

A.dpLink          { color: #333366; text-decoration:none }
A.dpLink:visited  { color: #333366; text-decoration:none }
A.dpLink:hover    { color: #333366; text-decoration:none; }
A.dpLink:active   { color: #333366; text-decoration:none; }

A.dpLinkViewing          { color: #333366; text-decoration:none }
A.dpLinkViewing:visited  { color: #333366; text-decoration:none }
A.dpLinkViewing:hover    { color: #FF6600; text-decoration:none; }
A.dpLinkViewing:active   { color: #FF6600; text-decoration:none; }

A.dpoLink          { color: #888888; text-decoration:none }
A.dpoLink:visited  { color: #888888; text-decoration:none }
A.dpoLink:hover    { color: #888888; text-decoration:none; }
A.dpoLink:active   { color: #888888; text-decoration:none; }


.calHour     { position:relative; 
               font: 7pt Verdana, Arial, Helvetica, sans-serif;
}
.calCourse   { position:absolute; visibility:hidden; }
.calCourseV2   { position:absolute; overflow: hidden; font: 7pt Verdana, Arial, Helvetica, sans-serif; }

.calSelect {
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
}
.calNavHilite {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}

/***
 *** OASIS Menus
 **/
.OM_cell {
    cursor: pointer;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000099;
    text-decoration: none;
    width: 100%;
}

.OM_cell a {
    cursor: pointer;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000099;
    text-decoration: none;
    width: 100%;
}
.OM_cell:visited {
    color: #000099;
    text-decoration: none;
}

.OM_cell:hover{
    text-decoration:none;
}
.OM_sub_cell {
    border: 1px solid #cccccc;
    cursor: pointer;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #F19238;
}
.OM_sub_cell a:hover{
    text-decoration: none;
    color: #FFFFFF;
}

/*
 Bootstrap CSS overrides. 
 If you want them to win over the default values, they should be !important
*/
@media (max-width: 767px) and (orientation:landscape){
    body * {
        overflow-x:visible;
    }
}
.oasis_bootstrap .navbar-header,
.oasis_bootstrap .navbar-dark .collapsed{
    background-color: #F19238 !important;
    color: #FFFFFF !important;
}
.oasis_bootstrap .dropdown-menu{
    background-color: #F19238 !important;
    color: #FFFFFF !important;
    margin:-2px 0px 0 -2px;
    padding:5px 0px;
}
.oasis_bootstrap .navbar-nav>.dropdown>a{
    font: 10pt Verdana, Arial, Helvetica, sans-serif !important;
    text-decoration:none !important;
    color: #FFFFFF !important;
}
.oasis_bootstrap .navbar-nav .nav-item .nav-link{
        color: #FFFFFF !important;
}
.oasis_bootstrap .navbar-nav .nav-item:hover,
.oasis_bootstrap .navbar-nav .nav-item:focus,
.oasis_bootstrap .navbar-nav .nav-item:focus-within,
.oasis_bootstrap .navbar-nav .nav-item.show{
    background-color: #FFFFFF !important;
    color: #F19238 !important;
}
.oasis_bootstrap .navbar-nav .nav-item:hover > .nav-link,
.oasis_bootstrap .navbar-nav .nav-item.show > .nav-link,
.oasis_bootstrap .navbar-nav .nav-item:focus > .nav-link,
.oasis_bootstrap .navbar-nav .nav-item > .nav-link:focus{
    background-color: #FFFFFF !important;
    color: #F19238 !important;
}
.oasis_bootstrap .nav-item.dropdown .nav-link.dropdown-item{
    padding:15px !important;
}
.oasis_bootstrap .nav-item .multi-level .nav-link.dropdown-item{
    padding:3px 20px !important;
}
.oasis_bootstrap .btn-default{
    font-size:14px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.oasis_bootstrap .form-control{
    font-size:14px;
}
.oasis_bootstrap .form-inline{
    margin:8px 0;
}
.oasis_bootstrap *.breadcrumb{
    margin-bottom:10px;
    padding: 2px;
    background-color: inherit;
}
@media (max-width: 767px) {
  .navbar-collapse.collapse.in{
    overflow-x:hidden !important;
  }
  .navbar-form{
    padding-left:15px !important;
    margin-right:0px !important;
    margin-left:5px !important;
  }
  .navbar-form .form-group {
    display:inline-block !important;
    vertical-align:top !important;
  }
}
@media print{
    a[href]:after{
        content: "" !important;
    }
    .hide_while_printing{
        display:none;
        visibility:hidden;
    }
}
/* End of bootstrap overrides */

/**
Portfolio styles
*/
.portfolio{
    width:65%;
    height:100%;
    float:left;
    border:1px outset gray;
}
.portfolio_sidebar{
    width:32%;
    height:100%;
    float:right;
    border:1px outset gray;
    text-align:left;
}
.portfolio_post_outer{
    text-align:left;
    padding-bottom:20px;
}
.portfolio_date_header{
    width:100%; 
    border-bottom:1px solid gray;
}
.portfolio_header_time{
    font-size:0.7em;
}
.portfolio_header_title{
    font-size:1.3em;
    color:#333333;
    width:50%;
}
.portfolio_author_header{
    padding-left:5px;
}
div.portfolio_edit_tools{
    float:right; 
    width:33%; 
    height:1em; 
    text-align:right;
    z-index:30;
}
div.portfolio_edit_tools:hover *{
    visibility:visible !important;
}
.cv_element{
    display:inline-block;
    border:1px solid gray;
}
.portfolio_footer_tags{
    font-size:1.2em;
}
.portfolio_footer_tags a{
    color:#FF6641;
    padding-left:5px;
}
.portfolio_footer_files{
    border:1px solid #DDDDDD;
}
.portfolio_footer_reply_link{
    width:100%;
    text-align:right;
    border-top:1px solid gray;
}
.portfolio_footer_comments{
    
}
.post_reply{
    padding-left:20px;
}
.post_reply_title{
    font-size:1.4em;
    color:#666666;
    display:inline-block;
}
.post_reply_author{
    border-top:1px solid gray;
}
.post_comment{
    border:1px solid #D0D0D0;
    background-color:#F5F5FF;
}
.post_comment_title{
    text-decoration:underline;
    font-weight:bold;
}
.post_comment_content{
    font-style:italic;
}
.replybox{
    width:100%;
}
.standard_tag_container{
    border:1px solid #DDDDDD;
    width:98%;
}
.cv_item{
    display:inline-block;
    max-height:250px;
    width:325px;
    overflow-y:auto;
    border:1px solid #DDDDDD;
    vertical-align:top;
}
.cv_item_title{
    font-weight:bold;
    text-align:center;
    border-bottom:1px solid #CCCCCC;
}
.tag{
    font-size:1.3em;
    border:1px solid gray;
    margin-left:2px;
    margin-right:2px;
}
.tag_title{
    background-color:#F3F3F3;
    display:inline-block;
    position:relative; 
    top:-12px; 
    left:10px; 
    padding:0 5px 0 5px;
}
.rules_container{
    width:800px;
    min-height:550px;
}
.current_rules{
    float:left;
    height:100%;
    width:191px;
    background-color:#EEEEEE;
    border-style:solid;
    border-color:black;
    border-width:0 0 1px 1px;
}
.current_rules_header{
    border-bottom:1px solid gray;
    border-left:1px solid black;
    background-color:#DDDDDD;
    height:1.5em;
    width:100%;
}
.current_rules ul{
    padding:0px;
    margin:0px;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:500px;
}
.current_rules ul li{
    background-color:#EEEEEE;
    height:1.5em;
    width:100%;
    padding-top:2px;
    padding-bottom:2px;
    border-bottom:1px solid #DDDDDD;
    list-style-type:none;
    display:inline-block;
    cursor:pointer;
}
.current_rules ul li:hover{
    background-color:#DDDDDD;
}
.current_rules ul li.selected:before{
    content:">";
}
.rule_base{
    width:74%;
    padding-right:9px;
    border-style:solid;
    border-color:black;
    border-width:0 1px 1px 1px;
    overflow-y:auto;
    float:right;
}
.rule_edit{
    width:100%;
    height:100%;
    border:1px outset gray;
}
/**
End of portfolio styles
*/
/***
 *** New styles
 **/
 .tabContentContainer{
   /* margin-left:10px; */
}
.tabContentContainer > div{
    padding-left:10px;
    padding-top:10px;    
}
#searchCriteria > div{
    padding:5px;
}
.table_with_border {
	border: 1px solid #cccccc;
	border-collapse: collapse;
}
/*
*.table_with_border > tbody > tr > td{
    border: 1px solid #cccccc;
}
*.table_with_border > tr > td{
    border: 1px solid #cccccc;
}
*/
.globalStats{
    background-color:#CDFFD4 !important;
}
.otherStats{
    background-color:#D0FFE0 !important;    
}
.missingStats{
    background-color:#CCCCCC !important;    
}
.firstStats{
    background-color:#DFFFE0 !important;
}
.alertDivContainer{
    position:absolute;
    background-color:#F9F9F9;
    border:3px ridge #333333;
    top:25%;
    left:33%;
    z-index:5;
}
.alertDivContainerWidth{
    min-width:450px;
    max-width:700px;
}
.alertDivContainerHeight{
    min-height:100px;
    max-height:600px;
}
.alertTitleBar{
    width:100%;
    border-bottom:1px solid #cccccc;
}
.alertTitleBar span{
    display:inline-block;
    padding-left:15px;
}
.alertContent{
    width:95%;
    overflow-y:auto;
    overflow-x:auto;
    padding:6px;
}
.alertContentWithButtons{
    width:95%;
    overflow-y:auto;
    overflow-x:auto;
    padding:8px;
}
.alertContentWidth{
    min-width:430px;
    max-width:680px;
}
.alertContentHeight{
    min-height:80px;
    max-height:565px;
}
.alertContentButtonHeight{
    min-height:80px;
    max-height:535px;
}
.alertButtons{
    width:100%;
    text-align:center;
    padding:5px 0;
}
.positiveAlert > .alertTitleBar{
    background-color:#DDFFDD;
}
.positiveAlert{
    border:3px ridge green;
}
.negativeAlert > .alertTitleBar{
    background-color:#FFDDDD;
}
.negativeAlert{
    border:3px ridge red;
}
.bannerWarningContainer{
    position:fixed;
    top:0px;
    width:75%;
    min-width:500px;
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0px;
    border-color:black;
    border-style:solid;
    border-width:0 1px 1px 1px;
    overflow:visible;
}
.bannerMessageContent{
    max-width=95%;
    min-height:10px;
    overflow-x:auto;
    padding-top:10px;
}
.bannerMessageContainer a.dismissLink{
    position:absolute;
    top:1px;
    right:5px;
}

div.advisor_type{

}
div.selected_advisor_type{
    background-color:#DDDDDD;
}
div.inactive_advisor_type:after{
    content:" (inactive)";
}
div.advisor_type:hover{
    background-color:#EFEFEF;
    cursor:pointer;
}
.advisor_action{
    margin-left: 15px;
    padding-left: 15px;
    min-width:180px;
    min-height:16px;
    background-color:#DDDDDD;
    border:1px solid #EFEFEF;
}
.advisor_action > span{
    display:inline-block;
    width:90%;
}
.advisor_select_row{
    /*max-height:50px;*/
    width:100%;
    border:1px solid #cccccc;
}
*.unsaved_changes:after{
    content:"*";
}
*.required:after{
    content:"*";
}
*.unselectable{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.clickable{
    cursor:pointer;
}
.link_cursor{
    cursor:pointer;
}
.help_cursor{
    cursor:help;
}
.movable_element{
    cursor:move;
}
.dragged_element{
    color:gray;
    border:1px solid gray;
}
.closeButton{
    float:right;
    padding-left:2px;
    padding-right:2px;
    margin-left:10px;
    border:1px solid black;
    cursor:pointer;
}
.instruction_button_indicator{
    font-weight:bold;
}
.instruction_link_indicator{
    font-weight:bold;
    text-decoration:underline;
}
.popup_instructions{
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
}
.popup_instructions ul{
    
}
.blank_input{
    color:#CCCCCC;
}
.small_input{
    height:20px;
}

.small_subheader_with_border {
    border: 1px solid #cccccc;
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
    color: #000000;
}

.small_subheader_off_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
    color: #000000;
}

.small_on_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.small_off_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}

.small_off_yellow_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFF99;
    color: #000000;
}

.small_disabled_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #DDDDDD;
}

.small_off_bold_with_border {
    border: 1px solid #cccccc;
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}

.small_header_with_border {
    border: 1px solid #cccccc;
    font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
}
.medium_off_with_border {
    border: 1px solid #cccccc;
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}
.medium_header_with_border {
    border: 1px solid #cccccc;
    font: bold 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #B9CB77;
    color: #000000;
}

.medium_subheader_with_border {
    border: 1px solid #cccccc;
    font: bold 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}

.medium_subheader_normal_with_border {
    border: 1px solid #cccccc;
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}



.summary_postponed {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #ab82ff;
    color: #000000;
}

.eval_needs_work {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #98fb98;
    color: #000000;
}

.eval_comment {
    border: 3px solid #98fb98;
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
}

.eval_not_open {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #add8e6;
    color: #000000;
}

.eval_closed {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFCCCC;
    color: #000000;
}

.eval_inactive {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE;
    color: #808080;
}

.eval_inactive_no_border {
    border: 0px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE;
    color: #808080;
}

.eval_list_inactive {
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE;
    color: #808080;
}
.smallest_subheader {
    font: bold 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
}
.smallest_subheader_with_border {
    border: 1px solid #cccccc;
    font: bold 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEF6FF;
    color: #000000;
    color: #000000;
}
.smallest_lightestgray {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #eeeeee;
}
.smallest_gray {
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #cccccc;
}
.smallest_with_border {
    border: 1px solid #cccccc;
    font: 7pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}
.smaller_with_border {
    border: 1px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}
.smaller_no_border {
    border: 0px solid #cccccc;
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}
.small_with_border {
    border: 1px solid #cccccc;
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}
.small_grayed_with_border {
    border: 1px solid #cccccc;
    font: 10pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #EEEEEE;
    color: #808080;
}
.medium_with_border {
    border: 1px solid #cccccc;
    font: 12pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    color: #000000;
}

div.confidential_img{
    background-image:url('/i/confidential_small.png');
    background-repeat:repeat;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    
}

.small_course_highlight{
    font: 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #ccddff;
}

.small_course_highlight_bold{
	font: bold 7.5pt Verdana, Arial, Helvetica, sans-serif;
    background-color: #ccddff;
}

/*
 * Build common grid layouts so that we have a defined pattern for classes
 */
.grid_1_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[1];
    display: grid;
    grid-template-columns:repeat(1, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_2_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[2];
    display: grid;
    grid-template-columns:repeat(2, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_3_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[3];
    display: grid;
    grid-template-columns:repeat(3, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 2fr;
    display: grid;
    grid-template-columns:1fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_4_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[4];
    display: grid;
    grid-template-columns:repeat(4, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 2fr;
    display: grid;
    grid-template-columns:2fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 3fr;
    display: grid;
    grid-template-columns:1fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_5_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[5];
    display: grid;
    grid-template-columns:repeat(5, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 2fr;
    display: grid;
    grid-template-columns:3fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 3fr;
    display: grid;
    grid-template-columns:2fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 4fr;
    display: grid;
    grid-template-columns:1fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_6_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[6];
    display: grid;
    grid-template-columns:repeat(6, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_4_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:4fr 2fr;
    display: grid;
    grid-template-columns:4fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 3fr;
    display: grid;
    grid-template-columns:3fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 4fr;
    display: grid;
    grid-template-columns:2fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_5_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 5fr;
    display: grid;
    grid-template-columns:1fr 5fr; /*This "fraction" unit determines column widths automatically */
}
.grid_7_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[7];
    display: grid;
    grid-template-columns:repeat(7, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_5_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:5fr 2fr;
    display: grid;
    grid-template-columns:5fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_4_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:4fr 3fr;
    display: grid;
    grid-template-columns:4fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 4fr;
    display: grid;
    grid-template-columns:3fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_5_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 5fr;
    display: grid;
    grid-template-columns:2fr 5fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_6_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 6fr;
    display: grid;
    grid-template-columns:1fr 6fr; /*This "fraction" unit determines column widths automatically */
}
.grid_8_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[8];
    display: grid;
    grid-template-columns:repeat(8, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_6_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:6fr 2fr;
    display: grid;
    grid-template-columns:6fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_5_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:5fr 3fr;
    display: grid;
    grid-template-columns:5fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_4_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:4fr 4fr;
    display: grid;
    grid-template-columns:4fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_5_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 5fr;
    display: grid;
    grid-template-columns:3fr 5fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_6_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 6fr;
    display: grid;
    grid-template-columns:2fr 6fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_7_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 7fr;
    display: grid;
    grid-template-columns:1fr 7fr; /*This "fraction" unit determines column widths automatically */
}
.grid_9_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[9];
    display: grid;
    grid-template-columns:repeat(9, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_7_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:7fr 2fr;
    display: grid;
    grid-template-columns:7fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_6_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:6fr 3fr;
    display: grid;
    grid-template-columns:6fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_5_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:5fr 4fr;
    display: grid;
    grid-template-columns:5fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_4_and_5_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:4fr 5fr;
    display: grid;
    grid-template-columns:4fr 5fr; /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_6_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 6fr;
    display: grid;
    grid-template-columns:3fr 6fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_7_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 7fr;
    display: grid;
    grid-template-columns:2fr 7fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_8_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 8fr;
    display: grid;
    grid-template-columns:1fr 8fr; /*This "fraction" unit determines column widths automatically */
}
.grid_10_column{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:(1fr)[10];
    display: grid;
    grid-template-columns:repeat(10, 1fr); /*This "fraction" unit determines column widths automatically */
}
.grid_8_and_2_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:8fr 2fr;
    display: grid;
    grid-template-columns:8fr 2fr; /*This "fraction" unit determines column widths automatically */
}
.grid_7_and_3_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:7fr 3fr;
    display: grid;
    grid-template-columns:7fr 3fr; /*This "fraction" unit determines column widths automatically */
}
.grid_6_and_4_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:6fr 4fr;
    display: grid;
    grid-template-columns:6fr 4fr; /*This "fraction" unit determines column widths automatically */
}
.grid_5_and_5_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:5fr 5fr;
    display: grid;
    grid-template-columns:5fr 5fr; /*This "fraction" unit determines column widths automatically */
}
.grid_4_and_6_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:4fr 6fr;
    display: grid;
    grid-template-columns:4fr 6fr; /*This "fraction" unit determines column widths automatically */
}
.grid_3_and_7_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:3fr 7fr;
    display: grid;
    grid-template-columns:3fr 7fr; /*This "fraction" unit determines column widths automatically */
}
.grid_2_and_8_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:2fr 8fr;
    display: grid;
    grid-template-columns:2fr 8fr; /*This "fraction" unit determines column widths automatically */
}
.grid_1_and_9_columns{
    display: -ms-grid;/* IE11 is wonky. */
    -ms-grid-columns:1fr 9fr;
    display: grid;
    grid-template-columns:1fr 9fr; /*This "fraction" unit determines column widths automatically */
}



/*
 * Fancy Shapes
 */
.chevron_v {
    position: relative;
    text-align: center;
    margin-bottom: -10%;
    padding-top:30%;
}
.chevron_v:before {
    content: '';
    position: absolute;
    top: 135%;
    height: 30%;
    left: 25%;
    width: 25%;
    background: #cccccc;
    transform: skew(0deg, 45deg);
}
.chevron_v:after {
    content: '';
    position: absolute;
    top: 135%;
    height: 30%;
    right: 25%;
    width: 25%;
    background: #cccccc;
    transform: skew(0deg, -45deg);
}
.hollow_circle {
    display: inline-block;
    box-sizing: content-box;
    border: 3px solid #cccccc;
    position: relative;
    border-radius: 30em;
}