/*#region Constants*/

/*Useful Colours*/
@Black: #000000;
@White: #FFFFFF;
@Green: #4F8A10;
@Red: #D8000C;
@Blue: #0078A1;
@Orange: #FFAD33;


/*Zeel*/

/* These variables are declared in ZeelTheme.js */
//@Zrecruiter: @Blue; /*This doesn't change*/
//@Brand_Colour: @Blue; /*0078A1*/

@Brand_Grey: #a7a8aa; /*a7a8aa*/

/*Backgrounds*/
@Background_Light: @White;
@Background_Mid: #f6f6f6;
@Background_Dark: #ebebeb;
@Background_Message_Info: #BDE5F8;
@Background_Message_Warning: #FEEFB3;
@Background_Message_Error: #FFBABA;
@Background_Message_Good: #DFF2BF;
@Background_Light_Trans: rgba(255, 255, 255, 0.5);
@Background_Transparent: transparent;
@Hover_Darken_Amount: 5%;

/*Text*/
@Text_Dark: #474747;
@Text_Light: @White;
@Text_Message_Info: #00529B;
@Text_Message_Warning: #9F6000;
@Text_Message_Error: @Red;
@Text_Message_Good: @Green;

/*Fonts*/
@DefaultLineHeight: 1.4;
@Font: 'Open Sans', sans-serif, Arial;
@Font-Small: (@Font-Normal - 2);
@Font-Smaller: (@Font-Normal - 1);
@Font-Normal: 13px;
@Font-Larger: (@Font-Normal + 2);
@Font-Section-Header: (@Font-Normal + 5);
@Font-Header: (@Font-Normal + 10);
@Font-Big: (@Font-Normal + 30);
@Font-FontAwesomeLight: "Font Awesome 5 Pro";
@Font-FontAwesomeRegular: "Font Awesome 5 Pro";
@Font-FontAwesomeSolid: "Font Awesome 5 Pro";
/*Layout*/
@Min_Width: 310px;

/*Borders*/
@Border_Width: 1px;
@Border_Style: solid;

/*Break Points*/
@BreakPoint_Mobile_End: 600px;
@BreakPoint_Standard_Start: 601px;
@BreakPoint_Standard_End: 1280px;
@BreakPoint_Wide_Start: 1281px;


@Grid_Row_Alt: #F1F1F1;

/*Animations*/
@-webkit-keyframes tick {
    0% {
        .v-opacity(0);
    }

    1%, 50% {
        .v-opacity(1);
    }

    51%, 100% {
        .v-opacity(0);
    }
}

/*#endregion */

/*#region Layout (Includes positioning)*/

/*#region Internal - Everything takes a parameter, nothing is referenced directly from the UI, but can be from other CSS files */

.l-height(@height) {
    height: @height;
}

.l-min-height(@height) {
    min-height: @height;
}

.l-max-height(@height) {
    max-height: @height;
}

.l-width(@width) {
    width: @width;
}

.l-min-width(@width) {
    min-width: @width;
}

.l-max-width(@width) {
    max-width: @width;
}

.l-margin(@margin) {
    margin: @margin;
}

.l-margin-top(@margin) {
    margin-top: @margin;
}

.l-margin-bottom(@margin) {
    margin-bottom: @margin;
}

.l-margin-left(@margin) {
    margin-left: @margin;
}

.l-margin-right(@margin) {
    margin-right: @margin;
}

.l-table-layout(@lay) {
    table-layout: @lay;
}

.l-padding(@pad) {
    padding: @pad;
}

.l-padding-top(@pad) {
    padding-top: @pad;
}

.l-padding-bottom(@pad) {
    padding-bottom: @pad;
}

.l-padding-left(@pad) {
    padding-left: @pad;
}

.l-padding-right(@pad) {
    padding-right: @pad;
}

.l-box-sizing(@box) {
    box-sizing: @box;
}

.l-vertical-align(@pos) {
    vertical-align: @pos;
}

.l-clear(@clr) {
    clear: @clr;
}

.l-float(@flt) {
    float: @flt;
}

.l-top (@pos) {
    top: @pos;
}

.l-bottom (@pos) {
    bottom: @pos;
}

.l-left(@pos) {
    left: @pos;
}

.l-right(@pos) {
    right: @pos;
}

.l-position(@pos) {
    position: @pos;
}

.l-z-index(@ind) {
    z-index: @ind;
}

.l-list-style-type(@lst) {
    list-style-type: @lst;
}

#l-grid-styles() {
    .header() {
        .v-background-brand;
        .v-color-light;
        .v-border-brand;
        .l-padding-left(5px);
        .l-padding-right(5px);
        .l-padding-top(10px);
        .l-padding-bottom(10px);
        .v-font-weight(normal);
        .l-box-sizing-border-box;
    }

    .checkbox-col() {
        .v-text-align-centre;
        .l-width(30px);
        .l-min-width(30px);
        flex: 0 0 30px !important;
    }

    .button-col() {
        .l-width(45px) !important;
        .l-min-width(45px) !important;
        .l-padding-top(5px) !important;
        .l-padding-bottom(5px) !important;
        .l-padding-left(2px) !important;
        .l-padding-right(2px) !important;
        .v-text-align-centre;
        flex: 0 0 45px !important;
    }
}
/*#endregion */
/*#region External - Nothing takes a parameter, everything can be referenced from the UI or other CSS files */

.l-height-max {
    .l-height(100%);
}

.l-width-min-page {
    .l-min-width(@Min_Width);
}

.l-width-max {
    .l-width(100%);
}

.l-width-max-important {
    .l-width(100%) !important;
    flex: 0 0 100% !important;
}

.l-width-auto {
    .l-width(auto);
}

.l-width-100 {
    .l-width(100px);
    flex: 0 0 100px;
}

.l-width-half {
    .l-width(50%);
    flex: 0 0 50%;
}

.l-width-half-important {
    .l-width(50%) !important;
    flex: 0 0 50% !important;
}

.l-width-third {
    .l-width(33.3%);
    flex: 0 0 33.3%
}

.l-width-two-thirds {
    .l-width(66.6%);
    flex: 0 0 66.6%
}

.l-width-quater {
    .l-width(25%);
    flex: 0 0 25%
}

.l-width-three-quaters {
    .l-width(75%);
    flex: 0 0 75%
}

.l-width-none {
    .l-width(0px);
}

.l-min-height-auto-important {
    .l-min-height(auto) !important;
}

.l-max-width-100 {
    .l-max-width(100px);
}

.l-max-width-full {
    .l-max-width(100%) !important;
}

.l-margin-none {
    .l-margin(0px);
}

.l-margin-top-none {
    .l-margin-top(0px);
}

.l-margin-top-none-important {
    .l-margin-top-none !important;
}

.l-margin-bottom-none {
    .l-margin-bottom(0px);
}


.l-margin-bottom-none-important {
    .l-margin-bottom-none !important;
}

.l-margin-left-none {
    .l-margin-left(0px);
}

.l-margin-right-none {
    .l-margin-right(0px);
}

.l-margin-normal {
    .l-margin(5px);
}

.l-margin-top-normal {
    .l-margin-top(5px);
}

.l-margin-bottom-normal {
    .l-margin-bottom(5px);
}

.l-margin-left-normal {
    .l-margin-left(5px);
}

.l-margin-right-normal {
    .l-margin-right(5px);
}

.l-margin-normal {
    .l-margin(5px);
}

.l-padding-none {
    .l-padding(0px);
}

.l-padding-top-none {
    .l-padding-top(0px);
}

.l-padding-bottom-none {
    .l-padding-bottom(0px);
}

.l-padding-left-none {
    .l-padding-left(0px);
}

.l-padding-right-none {
    .l-padding-right(0px);
}

.l-padding-top-none-important {
    .l-padding-top-none !important;
}

.l-padding-bottom-none-important {
    .l-padding-bottom-none !important;
}

.l-padding-left-none-important {
    .l-padding-left(0px) !important;
}

.l-padding-right-none-important {
    .l-padding-right(0px) !important;
}

.l-padding-none-important {
    .l-padding-none !important;
}

.l-padding-normal {
    .l-padding(5px);
}

.l-padding-top-normal {
    .l-padding-top(5px);
}

.l-padding-bottom-normal {
    .l-padding-bottom(5px);
}

.l-padding-bottom-large {
    .l-padding-bottom(10px);
}

.l-padding-left-normal {
    .l-padding-left(5px);
}

.l-padding-left-large {
    .l-padding-left(10px);
}

.l-padding-right-normal {
    .l-padding-right(5px);
}

.l-padding-right-large {
    .l-padding-right(10px);
}

.l-padding-large {
    .l-padding(10px);
}

.l-table-fixed {
    .l-table-layout(fixed);
}

.l-box-sizing-border-box {
    .l-box-sizing(border-box);
}

.l-clear-all {
    .l-clear(both);
}

.l-float-left {
    .l-float(left);
}

.l-float-right {
    .l-float(right);
}

.l-float-none {
    .l-float(none);
}

.l-float-none-important {
    .l-float(none) !important;
}

.l-float-initial {
    .l-float(initial);
}

.l-fixed-right {
    .l-right(0px);
}

.l-fixed-left {
    .l-left(0px);
}

.l-spacer-top {
    .l-margin-top(10px);
}

.l-spacer-top-small {
    .l-margin-top(5px);
}

.l-spacer-bottom {
    .l-margin-bottom(10px);
}

.l-spacer-bottom-small {
    .l-margin-bottom(5px);
}

.l-spacer-left {
    .l-margin-left(10px);
}

.l-spacer-left-small {
    .l-margin-left(5px);
}

.l-spacer-right {
    .l-margin-right(10px);
}

.l-spacer-right-small {
    .l-margin-right(5px);
}

.l-min-width-none {
    .l-min-width(unset);
}

.l-position-relative {
    .l-position(relative);
}

.l-position-absolute {
    .l-position(absolute);
}


.l-position-fixed {
    .l-position(fixed);
}


.l-list-style-type-none {
    .l-list-style-type(none);
}

.l-vertical-align-middle {
    .l-vertical-align(middle);
    align-items: center;
}

.l-vertical-align-top {
    .l-vertical-align(top);
}

.l-left-info-hover {
    .l-left(15px);
}

.l-top-info-hover {
    .l-top(23px);
}
.l-flex-max {
    flex: 1 1 100%;
}
/*#endregion */
/*#endregion */
/*#region Visual*/
/*#region Internal - Everything takes a parameter, nothing is referenced directly from the UI but can be from other CSS files */
.v-color(@colour) {
    color: @colour;
}

.v-font-size(@size) {
    font-size: @size;
}

.v-border(@bord) {
    border: @bord;
}

.v-border-top(@bord) {
    border-top: @bord;
}

.v-border-bottom(@bord) {
    border-bottom: @bord;
}

.v-border-left(@bord) {
    border-left: @bord;
}

.v-border-right(@bord) {
    border-right: @bord;
}

.v-border-collapse(@bcol) {
    border-collapse: @bcol;
}

.v-border-top-width(@width) {
    border-top-width: @width;
}

.v-border-bottom-width(@width) {
    border-bottom-width: @width;
}

.v-border-right-width(@width) {
    border-right-width: @width;
}

.v-border-left-width(@width) {
    border-left-width: @width;
}

.v-border-colour-top(@col) {
    border-top-color: @col;
}

.v-border-colour-bottom(@col) {
    border-bottom-color: @col;
}

.v-border-colour-right(@col) {
    border-right-color: @col;
}

.v-border-colour-left(@col) {
    border-left-color: @col;
}

.v-border-colour(@col) {
    border-color: @col;
}

.v-cursor(@cur) {
    cursor: @cur;
}

.v-background-clip(@clip) {
    background-clip: @clip;
}

.v-background-repeat(@rep) {
    background-repeat: @rep;
}

.v-background-position(@posX, @posY) {
    .v-background-position-x(@posX);
    .v-background-position-y(@posY);
}

.v-background-position-x(@posX) {
    background-position-x: @posX;
}

.v-background-position-y(@posY) {
    background-position-y: @posY;
}

.v-background-position(@pos) {
    background-position: @pos;
}

.v-background-size(@size) {
    background-size: @size;
}

.v-background-colour(@colour) {
    background-color: @colour;
}

.v-line-height(@height) {
    line-height: @height;
}

.v-opacity(@op) {
    opacity: @op;
}

.v-display(@pos) {
    display: @pos;
}

.v-text-decoration(@dec) {
    text-decoration: @dec;
}

.v-text-decoration-color(@hex) {
    text-decoration-color: @hex;
}

.v-overflow(@flow) {
    overflow: @flow;
}

.v-overflow-x(@flow) {
    overflow-x: @flow;
}

.v-overflow-y(@flow) {
    overflow-y: @flow;
}

.v-webkit-animation(@ani) {
    -webkit-animation: @ani;
}

.v-webkit-padding-start(@pad) {
    -webkit-padding-start: @pad;
}

.v-webkit-animation-iteration-count(@count) {
    -webkit-animation-iteration-count: @count;
}

.v-font-weight(@weight) {
    font-weight: @weight;
}

.v-list-style(@style) {
    list-style: @style;
}

.v-font-family(@font) {
    font-family: @font;
}

.v-word-wrap(@wrp) {
    word-wrap: @wrp;
}

.v-box-shadow(@sdw) {
    box-shadow: @sdw;
    -moz-box-shadow: @sdw;
    .v-webkit-box-shadow(@sdw);
}

.v-text-align(@pos) {
    text-align: @pos;
}

.v-outline(@out) {
    outline: @out;
}

.v-border-radius(@rad) {
    border-radius: @rad;
}

.v-align-items(@ali) {
    align-items: @ali;
}

.v-align-content(@ali) {
    align-content: @ali;
}

.v-webkit-box-shadow(@sdw) {
    -webkit-box-shadow: @sdw;
}

.v-background-image(@img) {
    background-image: @img;
}

.v-word-break(@break) {
    word-break: @break;
}

.v-border-radius(@rad) {
    border-radius: @rad;
}

.v-webkit-appearance(@app) {
    -webkit-appearance: @app;
}

.v-webkit-tap-highlight-color(@col) {
    -webkit-tap-highlight-color: @col;
}

.v-webkit-border-radius(@rad) {
    -webkit-border-radius: @rad;
}

.v-text-shadow(@sdw) {
    text-shadow: @sdw;
}

.v-transition(@sec) {
    transition: @sec;
}

.v-grid-area(@area) {
    grid-area: @area;
}

.v-grid-gap(@size) {
    grid-gap: @size;
}

.v-grid-template-areas(@areas) {
    grid-template-areas: @areas;
}

.v-grid-row-column(@rpos, @cpos) {
    grid-row: @rpos;
    -ms-grid-row: @rpos;
    grid-column: @cpos;
    -ms-grid-column: @cpos;
}

.v-white-space(@type) {
    white-space: @type;
}

.v-text-overflow(@over) {
    text-overflow: @over;
}

.v-transform-rotate(@deg) {
    transform: rotate(@deg);
}

.v-visibility(@pos) {
    visibility: @pos;
}
/*#endregion */
/*#region External - Nothing takes a parameter, everything can be referenced from the UI or other CSS files */
.v-shadow-top {
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.14), 0 2px 15px 0 rgba(0, 0, 0, 0.12), 0 4px 4px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.14), 0 2px 15px 0 rgba(0, 0, 0, 0.12), 0 4px 4px -1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.14), 0 2px 15px 0 rgba(0, 0, 0, 0.12), 0 4px 4px -1px rgba(0, 0, 0, 0.2);
}

.v-overflow-hidden {
    .v-overflow(hidden) !important;
}

.v-overflow-unset {
    .v-overflow(unset) !important;
}

.v-overflow-y-auto {
    .v-overflow-y(auto);
}

.v-word-wrap-break {
    .v-word-wrap(break-word);
}

.v-color-brand {
    .v-color(@Brand_Colour);
}

.v-color-light {
    .v-color(@Text_Light);
}

.v-color-dark {
    .v-color(@Text_Dark);
}

.v-color-red {
    .v-color(@Text_Message_Error);
}

.v-color-green {
    .v-color(@Text_Message_Good);
}

.v-color-yellow {
    .v-color(@Text_Message_Warning);
}

.v-color-blue {
    .v-color(@Text_Message_Info);
}

.v-color-black {
    .v-color(@Black);
}

.v-background-light {
    .v-background-colour(@Background_Light);
}

.v-background-transparent {
    .v-background-colour(@Background_Transparent);
}

.v-background-mid {
    .v-background-colour(@Background_Mid);
}

.v-background-dark {
    .v-background-colour(@Brand_Grey);
}

.v-background-brand {
    .v-background-colour(@Brand_Colour);
}

.v-background-blue {
    .v-background-colour(@Blue);
}

.v-background-warning {
    .v-background-colour(@Background_Message_Warning);
}

.v-background-good {
    .v-background-colour(@Background_Message_Good);
}

.v-background-error {
    .v-background-colour(@Background_Message_Error);
}

.v-font-global {
    .v-font-family(@Font);
}

.v-border-none {
    .v-border(none) !important;
}

.v-border-dark {
    .v-border(@Border_Style @Border_Width @Brand_Grey);
}

.v-border-dark-top {
    .v-border-top(@Border_Style @Border_Width @Brand_Grey);
}

.v-border-dark-left {
    .v-border-left(@Border_Style @Border_Width @Brand_Grey);
}

.v-border-dark-right {
    .v-border-right(@Border_Style @Border_Width @Brand_Grey);
}

.v-border-dark-right-important {
    .v-border-dark-right !important;
}

.v-border-dark-bottom {
    .v-border-bottom(@Border_Style @Border_Width @Brand_Grey);
}

.v-border-brand {
    .v-border(@Border_Style @Border_Width @Brand_Colour);
}

.v-border-brand-top {
    .v-border-top(@Border_Style @Border_Width @Brand_Colour);
}

.v-border-brand-bottom {
    .v-border-bottom(@Border_Style @Border_Width @Brand_Colour);
}

.v-border-brand-left {
    .v-border-left(@Border_Style @Border_Width @Brand_Colour);
}

.v-border-brand-right {
    .v-border-right(@Border_Style @Border_Width @Brand_Colour);
}

@MidBorderColor: darken(@Background_Mid, 8%);

.v-border-mid-top {
    .v-border-top(@Border_Style @Border_Width @MidBorderColor);
}

.v-border-mid-bottom {
    .v-border-bottom(@Border_Style @Border_Width @MidBorderColor);
}

.v-border-mid-left {
    .v-border-left(@Border_Style @Border_Width @MidBorderColor);
}

.v-border-mid-right {
    .v-border-right(@Border_Style @Border_Width @MidBorderColor);
}

.v-border-top-none {
    .v-border-top(none);
}

.v-border-top-none-important {
    .v-border-top-none !important;
}

.v-border-bottom-none {
    .v-border-bottom(none);
}

.v-border-bottom-none-important {
    .v-border-bottom-none !important;
}

.v-border-left-none {
    .v-border-left(none);
}

.v-border-right-none {
    .v-border-right(none);
}

.v-border-colour-white {
    .v-border-colour(@White);
}

.v-text-decoration-none {
    .v-text-decoration(none);
}

.v-text-decoration-underline-important {
    .v-text-decoration(underline) !important;
}

.v-cursor-pointer {
    .v-cursor(pointer);
}

.v-cursor-default {
    .v-cursor(default);
}

.v-cursor-auto {
    .v-cursor(auto);
}

.v-cursor-ns-resize {
    .v-cursor(ns-resize);
}

.v-hidden {
    .v-display(none);
}

.v-hidden-important {
    .v-display(none) !important;
}

.v-background-no-repeat {
    .v-background-repeat(no-repeat);
}

.v-second-pulsate {
    .v-webkit-animation(tick 2s linear);
    .v-webkit-animation-iteration-count(infinite);
    .v-opacity(1);
}

.v-thin-table-only {
    .v-display(none);
}

.v-bold {
    .v-font-weight(bold);
}

.v-font-weight-normal {
    .v-font-weight(normal);
}

.v-font-larger {
    .v-font-size(@Font-Larger);
}

.v-font-normal {
    .v-font-size(@Font-Normal);
}

.v-font-smaller {
    .v-font-size(@Font-Smaller);
}

.v-text-align-centre {
    .v-text-align(center);
    justify-content: center;
    -ms-justify-content: center;
}

.v-text-align-centre-important {
    .v-text-align-centre !important;
}

.v-text-align-left {
    .v-text-align(left);
}

.v-text-align-left-important {
    .v-text-align(left) !important;
}

.v-text-align-right {
    .v-text-align(right);
}

.v-text-align-right-important {
    .v-text-align(right) !important;
}

.v-word-break-all {
    .v-word-break(break-all);
}

.v-validation-success {
    .v-color(@Text_Message_Good);
}

.v-validation-fail {
    .v-color(@Text_Message_Error);
}

.v-display-block {
    .v-display(block);
}

.v-display-inline {
    .v-display(inline);
}

.v-display-inline-block {
    .v-display(inline-block);
}

.v-display-grid {
    .v-display(-ms-grid);
    .v-display(grid);
}

.v-display-flex {
    .v-display(-ms-flex);
    .v-display(flex);
}

.v-flex-center {
    align-items: center;
}

.v-flex-start {
    align-items: flex-start;
}

.v-flex-end {
    align-items: flex-end;
}

.v-justify-content-space-between {
    justify-content: space-between;
}

.v-justify-content-flex-end {
    justify-content: flex-end;
}

.v-justify-content-center {
    justify-content: center;
}

.v-flex-wrap {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.v-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.v-line-height-inherit {
    .v-line-height(inherit) !important;
}

.v-line-height-normal {
    .v-line-height(normal) !important;
}

.v-line-height-double {
    .v-line-height((@DefaultLineHeight * 2)) !important;
}

.v-visibility-collapse {
    .v-visibility(collapse);
}

.v-text-singleline {
    .v-overflow-hidden;
    .v-text-overflow(ellipsis);
    .v-white-space(nowrap);
}

.v-outline-none {
    .v-outline(none);
}

/*#endregion */

.ui-draggable {
    .v-cursor-pointer();
}



@media (max-width: @BreakPoint_Mobile_End) {
    .l-width-full-m {
        .l-width-max;
    }
}