.form-bg-background-1
{
    background: #e4e4e4;
}

.form-bg-background-2
{
    background: #f0f0f0;
}


.login-container
{
    width: 500px;
    border: 1px solid black;
    border-radius: 4px;
    margin: auto;
    /*padding: 15px;*/

}

.login-form
{
    padding: 15px;
    /*background-color: rgba(13, 77, 140,.4);*/
    background-color: rgba(255,255,255,.6);

}

.login-header
{
    color: white;
    background-color: #0d4d8c;
    text-align: center;
    padding-bottom: 5px;

}

.login-logo
{
    /*width: 300px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    -ms-interpolation-mode: bicubic;
}

.login-button
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-contact
{
    text-align: center;
}

.index-background-image
{
    background-image: url("/static/tcms/images/BDA_1823_1.12ca5a79497c.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    
    height: 100%;    
    width: 100%;
    
}

/* .tcms-main-div
{
    height: 100%;
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right:auto;
} */

/* .tcms-main-header-div
{
    padding-top: 0px;
    
} */

 body
{
    background: #EAECEC;
   overflow: auto;
   touch-action: manipulation;
} 

.tcms-main-header-banner
{
    /*background: #355379;*/
    /*background: #292B2C;*/
    background: #284163;

    color: white;
    /* padding-top: 5px;
    padding-bottom: 5px;
    
    margin-left: 0px;
    margin-right: 0px; */
}

.tcms-icon-transitions
{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tcms-icon-red-colour
{
    color: #D9534F;
}

.tcms-icon-green-colour
{
    color: #5CB85C;
}

/* this holds canvas and laydown yard div */ 
.cable-management-canvas
{
    height: calc(100vh - 95px);
    width: 100%;
    margin: auto;
    position: relative;
}
.sld-draw-canvas
{
    height: calc(100vh - 210px);
    width: 100%;
    margin: auto;
    position: relative;
    background-color: #3e3e3e;
}

/* this holds the canvas */
.mine-map-canvas-div
{
    /*background: blue;*/
    border: 1px solid #dddddd;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #3e3e3e;

}

.laydown-yard-div
{
    z-index: 5;
    min-width: 220px;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    overflow-y: hidden;  
}

#laydownYardHeader {
    background-color: rgba(51, 87, 55, 0.9);
}

#outOfServiceHeader {
    background-color: rgba(128, 63, 61, 0.9);
}

#cableCountDiv
{
    z-index: 5;
    background-color: #2d2d2d;
    min-width: 190px;
}


#cableCountHeader {
    background-color: rgba(15, 68, 117, 0.9);
}

#outOfServiceHeader, #laydownYardHeader, #cableCountHeader
{
    color: #fff;
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 1.25rem;
    font-weight: 400;
}

#cableManagementCanvasAside {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    height: calc(100% - 340px);
    /* background-color: red; */
}
.cable-management-dre-overview-div
{
    margin-top: 5px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

.cable-management-repair-count
{
    position: absolute;
    top: 0px;
    left: calc(100% - 190px);
}

.out-of-service-div
{
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.6);
    overflow-y: hidden; 
    height: 100%;
}

/* #laydownYardDivContent {
    height: 100%;
}
#outOfServiceDivContent {
    height: 100%;
} */

/* .laydown-yard-ul
{
    float: none;
    overflow-y: scroll;
    color: black;
    font-size: 0.8em;
    height: calc(100% - 36px);
} */
.out-of-service-ul
{
    float: none;
    overflow-y: scroll;
    color: black;
    font-size: 0.8em;
    /* height: calc(100% - 36px); */
    /* height: calc(200% - 10px); */
    height: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}


.tcms-cable-li
{
    display:inline-block;
    float:none;
    padding: 4px;
    cursor: pointer;
    border: 3px solid #5CB85C;
    font-weight: 650;
    background: white;
    z-index: 5;
    min-width: 150px;
}

.tcms-cable-li-header
{
    display:inline-block;
    float:none;
    padding: 4px;
    cursor: pointer;
    border: 3px solid #5CB85C;
    font-weight: 650;
    font-size: 1.2em;
    background: white;
}



.cable-management-cable-assignment
{
    margin-top: 10px;
    margin-left: 0px;
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
}



.cable-mangement-dre-div-container
{
     float: left;     
     /*display: flex;
*/
     margin-right: 5px;
     margin-bottom: 5px;
     border: 2px solid #284163;
     
     border-radius: 5px;
     /* text-align: center; */
     /*width: 300px;*/
     cursor: pointer;
     -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
     
}

.cable-mangement-dre-div-label
{
    /*float: left;  */
    background: #355379;  
    background: #284163;  
    width: 100%;
    height: 40px;
    /*height: 100%;
    min-height: 200px;
    max-height: 200px;*/
    /*min-height: 200px;*/
    
    align-items: stretch;
    color: white;
}

.cable-mangement-dre-title-span
{
    font-size: 1.1em;
    display: inline-block;
    float: left;
    text-align: left;
    margin-left: 20px;
    margin-top: 5px;
    cursor: default;
}

.cable-mangement-dre-substation-span
{
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8em;
}


.cable-management-dre-editable-span
{
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8em;
    min-width: 60px;
    min-height: 22px;
}

.cable-management-dre-editable-span-input
{
    max-width: 90px;
}

.dre-cm-tab-button
{
    cursor: default;
}

.dre-cm-tab-button:hover
{
    border: 1px solid white;
}

.mouse-over-pointer
{
    cursor: default;
}


.cable-mangement-dre-div-cables
{
    /*float: left;  */
   
    width: 300px;
    /*height: 100%;
    min-height: 200px;
    max-height: 200px;*/
    height: calc(100% - 40px);
    padding-top: 10px;
    padding-bottom: 10px;
    display: table-cell;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+12,ffffff+46,dddddd+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 12%, #ffffff 46%, #EAECEC 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 12%,#ffffff 46%,#EAECEC 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 12%,#ffffff 46%,#EAECEC 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#EAECEC',GradientType=0 ); /* IE6-9 */

    position: relative;
}

.cable-management-dre-div-multi-cable
{
    /* width: 140px; */
    min-width: 150px;
    min-height: 170px;
    padding-top: 0px;
    padding-bottom: 0px;
    display: table-cell;
    border-left: 1px solid #284163;
    /*border-right: 1px solid #284163;*/
    /*overflow: hidden; */
    white-space: nowrap;
}

.cable-management-dre-div-multi-cable-title
{
    vertical-align: top;
    display: block;
    text-align: center;
}

.cable-management-dre-div-multi-cable-droppable-div
{
    


}
/*
.ui-state-ready-for-drop
{
    border: 3px dashed #888;
}
*/
.ui-state-hover-for-drop
{
    border: 3px dashed rgba(53,83,121,0.7);
}

.cable-mangement-dre-ul-cables
{
    margin: 0;
    margin-bottom: 7px;
	padding: 0;
	list-style-type: none;	
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
	display: inline-block;
	-webkit-column-break-inside: avoid-column;
	page-break-inside: avoid-column;
	/*break-inside: avoid;*/
    break-inside: avoid-column;
    overflow: hidden;
    width: 100%;
    min-height: 50px;
    padding-left: 3px;
}
.cable-mangement-dre-ul-cables-single
{
    margin: 0;
    margin-bottom: 7px;
    margin-left: 7px;
    margin-right: 7px;
	padding: 0;
	list-style-type: none;	
    -moz-column-count: 1;
    -moz-column-gap: 20px;
    -webkit-column-count: 1;
    -webkit-column-gap: 10px;
    column-count: 1;
    column-gap: 10px;
	display: inline-block;
	-webkit-column-break-inside: avoid-column;
	page-break-inside: avoid-column;
	/*break-inside: avoid;*/
    break-inside: avoid-column;
    overflow: hidden;
    width: 100%;
    min-height: 50px;

}

.cable-mangement-dre-li-cables
{
    
    padding: 2px;
    margin-bottom: 3px;

    border: 2px solid #c5c7c9;
    border-radius: 5px;

    font-weight: 650;
    font-size: 0.7rem;
    vertical-align: top;
    
    height: 45px;
    width: 140px;
    background-color: #fcfcfc;
    
    list-style-type: none;
    white-space: nowrap;
    -webkit-column-break-inside: avoid-column;
    page-break-inside: avoid-column;    
    break-inside: avoid-column;
    overflow: hidden;

    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/* no longer show the pink outline of the cablecrew moved cables as no one is clearing them. Keep the functionality in the background however */
/* .cable-mangement-dre-li-cables[data-cablecrewmoved='1']
{
    background-color: rgb(222, 202, 255);
} */

.cable-mangement-dre-li-cables > .cable-mangement-cable_title-row {
    margin-bottom: 1px;
}
.cable-mangement-dre-li-cables > .cable-mangement-cable_properties-row {
    font-weight: 400;
    font-size: 0.75rem
}

.cable-mangement-dre-li-cables[data-condition='10'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='9'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='8'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge  {
    background-color: #75d162;
}

.cable-mangement-dre-li-cables[data-condition='7'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='6'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='5'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='4'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge {
    background-color: #edb443;
}

.cable-mangement-dre-li-cables[data-condition='3'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='2'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge,
.cable-mangement-dre-li-cables[data-condition='1'] > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge  {
    background-color: #ff4d4d;
}

.cable-mangement-dre-li-cables > .cable-mangement-cable_properties-row .cable-management-cable_prop_badge {
    font-weight: 600;
    font-size: 0.65rem;
    background-color: #c5c7c9;
    color: #fcfcfc;
    border-radius: 5px;
    padding: 0 4px;
    min-width: 30px;
}

/***** NEW CABLE DESIGN ***/
/*
.cable-mangement-dre-li-cables
{
    border: 3px solid #5CB85C;
    border-radius: 5px;
    width: 140px;
    padding: 2px;

    list-style-type: none;
    white-space: nowrap;
    -webkit-column-break-inside: avoid-column;
    page-break-inside: avoid-column;    
    break-inside: avoid-column;
    overflow: hidden;

    cursor: move;  fallback if grab cursor is unsupported 
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.cable-mangement-dre-li-cables .counter
{
    min-width: 20px;

}

.cable-mangement-dre-li-cables .tag
{

}

.cable-mangement-dre-li-cables .value-badge
{
    background-color: #888;
    color: white;
    font-weight: 400;
    font-size: 0.75rem;
    border-radius: 2px;
    padding: 2px 2px;
}
*/

.cable-management-file-object-link-span
{
    font-size: 0.7em;
    position: absolute;
	bottom: 18px;
	left: 5px;
}

.cable-management-lastupdated-span
{
    font-size: 0.7em;
    position: absolute;
	bottom: 2px;
	left: 5px;
}

.cable-management-lastupdated-span.last-cable-updated-flag:hover
{
    color: #355379;
    text-decoration: underline;
    cursor: pointer;
}

 .cable-mangement-order-span
 {
    display: inline-block;
	
	color: #707070;
	width:33px;
    float: left;
    text-align: left;
    

 }

 .cable-mangement-name-span
 {
     text-align: left;
     float: left;
     width: 40%;
 }

 /* span class for broadmeadow */
 .cable-mangement-name-span-brm
 {
     text-align: left;     
 }

 .cable-mangement-csa-span
 {
    background-color: rgba(255,255,255,0.6);
    color: #707070;
    font-size: 0.9em;
    text-align: center;
    float: right;
    padding-top: 2px;
 }

.cable-mangement-prelaidText-editable-span-input
 {
    background-color: rgba(255,255,255,0.6);
    color: #707070;
    font-size: 1em;
    text-align: left;
    float: right;
    padding-top: 0px;
    min-width: 160px;
    border: 1px solid #999999;

 }


.ui-sortable-highlight{
	background: white;
	width: 100%;
	height: 35px;
	border: 3px dashed #888;
	white-space: nowrap;
	break-inside: avoid-column;
	overflow: hidden;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;		
	
}

/* DRE div colour picker table */

.cable-management-colour-picker-table
{
    width: 100%;
}
.cable-management-colour-picker-td-white, .dialogue-colour-picker-td-white
{
    background-color: #ffffff;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-blue, .dialogue-colour-picker-td-blue
{
    background-color: #284163;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-black, .dialogue-colour-picker-td-black
{
    background-color: #000000;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-red, .dialogue-colour-picker-td-red
{
    background-color: #B84F47;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-green, .dialogue-colour-picker-td-green
{
    background-color: #368D45;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-orange, .dialogue-colour-picker-td-orange
{
    background-color: #ec971f;
    cursor: initial;
    height: 30px;
}
.cable-management-colour-picker-td-purple, .dialogue-colour-picker-td-purple
{
    background-color: #563D7C;
    cursor: initial;
    height: 30px;
}

.cable-mangement-label-div-container
{
     float: left;     
     /*display: flex;
*/
     margin-right: 5px;
     margin-bottom: 5px;
     border: 2px solid #284163;
     
     border-radius: 5px;
     /* text-align: center; */
     /*width: 300px;*/
     cursor: pointer;
     -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
     
}

.cable-mangement-label-div-label
{
    /*float: left;  */
    background: #355379;  
    background: #284163;  
    width: 100%;
    height: 40px;
    /*height: 100%;
    min-height: 200px;
    max-height: 200px;*/
    /*min-height: 200px;*/
    
    align-items: stretch;
    color: white;
}

.cable-mangement-label-title-span
{
    font-size: 1.1em;
    display: inline-block;
    float: left;
    text-align: left;
    margin-left: 5px;
    margin-top: 5px;
    cursor: default;
}


.cable-mangement-label-text-div
{
    background-color: white;
    padding: 0.5rem;
    height: 100%;
    /* font-size: 1.1em;
    display: inline-block;
    float: left;
    text-align: left;
    margin-left: 20px;
    margin-top: 5px;
    cursor: default; */
}



/* CABLE COUNT TABLE */

#cableCountDivContent {
    padding: 3px;
}
.cable-count-table
{
    width: 100%;
    color: #f7f7f7;
}

 .cable-count-top-header
 {
    font-size: 0.9em;
    margin-left: 2px;
    margin-right: 2px;    
    text-align: center;
    color: #F5A624;
    font-weight: 600;
 }

  .cable-count-left-header
 {
    font-size: 0.9em;   
    text-align: center;
    color: #F5A624;
    font-weight: 600;
 }

 .cable-count-value
 {
     text-align: center;
 }


/* DIALOGUE OVERWRITES */
.dialogue-form-row
{
    margin-top: 2px;
    margin-bottom: 2px;
}

.page-resize-dialogue-div
{
    border: 1px solid #dddddd;
    padding: 5px;
    background: #dddddd;
}

.page-resize-dialogue-div-alt
{
    border: 1px solid #ffffff;
    padding: 5px;
    background: #ffffff;
}

.cableHistoryResults
{
    overflow-y: scroll;
    max-height: 300px;
}

/* dialogue title bar */
.ui-widget-header {
  
  background: white;
  font-weight: normal;
  color: black;
  font-size: 1.1em;
  padding-top: 0px;
  padding-bottom: 0px;
  
}

/* SLD TAB */
#sld-tab
{
    position: relative;
}

#mine-sld-row-div
{
    position: absolute;
    top: 0;
    left: 0;
}

/* ELEC INFRASTRUCTURE TAB */
#elecInfra-tab
{
    position: relative;
}

#mine-elinf-row-div
{
    position: absolute;
    top: 0;
    left: 0;
}

/* SINGLE LINE BLOCK DIAGRAM TAB */
#sld-draw-tab
{
    position: relative;
}

#mine-sld-draw-wrapper-div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Cable Movement Records Tab */
.cable-movements-table
{
    background: white;
    
}
.cable-movements-table th
{
    font-size: 0.8em;
    text-align: center;
}

.cable-movements-table td
{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 3px;
    padding-right: 3px;
    vertical-align: top;
}



.cable-movements-table input[type="text"],
.cable-movements-table select
{
    border: 1px solid #999; 
    width: 100%;
    margin: auto;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.cable-movements-table select::-ms-expand {
    display: none;
}
.cable-movements-table input[type="checkbox"]
{
    float: left;
    width: 100%;
    margin: 0px;
}

.cable-movements-table select
{
    text-align-last: center;
}


/*
.cable-movements-table tr:hover
{
    background: #e0e0e0;
}
*/

.cable_movements-table-td-center
{
    text-align: center;
    
}

.cable_movements-table-td-small
{
    width: 66px;
}

.cable_movements-table-td-medium
{
    width: 100px;
}
.cable_movements-table-td-large
{
    width: 150px;
}

.cable_movements-cable-prop-span
{
    /*display: block;*/
    font-size: 0.8em;
}


.cable-movement-file-drop-div
{
    min-width: 100px;
    min-height: 100px;
    max-width: 100px;
    max-height: 100px;
    border: 2px dashed #999999;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 50%;
    
}

/* for Cable name to show border of Condition colour */
.cable-icon-table-td-span
{
    display: inline-block;
    text-align: center;
    border: 3px solid #dddddd;
    border-radius: 5px;
    width: 145px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    font-size: 0.85em;
}



.custom-control-input:focus ~ .custom-control-indicator {
    box-shadow: none !important;
}


.hidden-xl-down
{
    display: none;
}

/* Documents tab styling */
/* documents tab list group styling */
.documentTitleDescriptionDiv
{
    float: left;
}
.documentTitleDiv
{
    display: block;
}

.document-list-item:hover
{
    background-color: #E4EDFC;
}

@font-face {
    font-family: 'intelics-fa';
    src: url("../fonts/intelics-fa.97ccf7568d4d.eot?6eknk4");
    src: url("../fonts/intelics-fa.97ccf7568d4d.eot?6eknk4#iefix") format("embedded-opentype"), url("../fonts/intelics-fa.2654b1135bb2.ttf?6eknk4") format("truetype"), url("../fonts/intelics-fa.bf4d37675984.woff?6eknk4") format("woff"), url("../fonts/intelics-fa.bea484da3cf8.svg?6eknk4#intelics-fa") format("svg");
    font-weight: normal;
    font-style: normal; }
  .fa-intelics {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'intelics-fa' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  
    .fa-electric-motor:before {
      content: "\e90f";
    }
    .fa-electric-motor-low:before {
      content: "\e910";
    }
    .fa-electric-motor-dc:before {
      content: "\e911";
    }
    .fa-electric-motor-ac:before {
      content: "\e912";
    }
    .fa-d-shackle:before {
      content: "\e913";
    }
    .fa-dc-electricity:before {
      content: "\e914";
    }
    .fa-ac-electricity:before {
      content: "\e915";
    }
    .fa-solar-panel:before {
      content: "\e916";
    }
    .fa-petrol-bowser:before {
      content: "\e917";
    }
    .fa-clarifier-pond:before {
      content: "\e918";
    }
    .fa-light-trailer:before {
      content: "\e919";
    }
    .fa-car-trailer:before {
      content: "\e91a";
    }
    .fa-oil-can:before {
      content: "\e91b";
    }
    .fa-cable-rigging:before {
      content: "\e91c";
    }
    .fa-hydraulic-strut:before {
      content: "\e91d";
    }
    .fa-landcruiser:before {
      content: "\e907";
    }
    .fa-cabletower:before {
      content: "\e908";
    }
    .fa-waterpump:before {
      content: "\e909";
    }
    .fa-draglinebucket:before {
      content: "\e90a";
    }
    .fa-substation:before {
      content: "\e90b";
    }
    .fa-tractor:before {
      content: "\e90c";
    }
    .fa-stubline:before {
      content: "\e90d";
    }
    .fa-cablerope:before {
      content: "\e90e";
    }
    .fa-bulldozer:before {
      content: "\e900";
    }
    .fa-scraper:before {
      content: "\e901";
    }
    .fa-rear-dumper:before {
      content: "\e902";
    }
    .fa-loader:before {
      content: "\e903";
    }
    .fa-shovel:before {
      content: "\e904";
    }
    .fa-grader:before {
      content: "\e905";
    }
    .fa-dragline:before {
      content: "\e906";
    }

    /* bootstrap modifiers */
    /* .nav-link
    {
        font-variant: small-caps;
    }

    .nav-link.active 
    {
        background-color: #526b8d !important;
        color: white  !important;
    }
    .nav-link
    {
        color: #526b8d !important;
    }
    .col-form-label
    {
        font-variant: small-caps;
        font-size: 0.9em;
    }

    .custom-select,  .form-control
    {
        border-radius: 0;
    }
    */


    /**************** SHIFT LOG CLASSES ***********/
    
.drop {
    width: 100%;
    height: 150px; /* changed from 150px */
    border: 3px dashed #DADFE3;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background: white;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin: auto;
    position: relative;
    /*&:hover
     * cursor: pointer
     * background: #f5f5f5 */ }
  
  .drop .cont {
    color: #8E99A5;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  
  .drop .cont i {
    font-size: 400%;
    color: #8E99A5;
    position: relative; }
  
  .drop .cont .tit {
    font-size: 400%;
    text-transform: uppercase; }
  
  .drop .cont .desc {
    color: #A4AEBB; }
  
  .drop .cont .browse {
    margin: 10px 25%;
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    background: #09f; }
  
  .drop input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: red;
    opacity: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }
  
  .fileupload__list {
    list-style: none;
    margin: 0;
    padding: 0; }
    .fileupload__list li {
      font-size: 14px; }
      .fileupload__list li:first-child:before {
        content: "Attached files";
        display: block;
        margin-bottom: 5px;
        margin-top: 15px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500; }
  
  .btn-clear-attached {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #CCC; }
  
  .fileupload__list:empty + .btn-clear-attached {
    display: none; }


.btn-shadow, .btn-shadow:focus { /* Classes that add a little box-shadow to the buttons, and moves slightly with the users click, as if being *pressed* */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}
.btn-shadow:active, .btn-shadow.active {
  transform: translateY(2px);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.btn-group-rounded label:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-clip: padding-box;
  }
  
  .btn-group-rounded label:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-clip: padding-box;
  }

  .btn-round {
    text-transform: uppercase;
    font-weight: 600;
    /* color: #F4F7F1; */
    padding: 6px 18px;
    border-radius: 25px;
    font-size: 14px;
  }
  
  .input-round {
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 25px;
    font-size: 14px;
  }
  .input-updating
  {
    border-color: #FFC107;
    border-width: 2px;
  }
  
  .input-updated
  {
    border-color: #75d162;
    border-width: 2px;
  }
  
  .input-failed
  {
    border-color: #DC3545;
    border-width: 2px;
  }

  
  .btn-round.btn-sm {
    padding: 4px 14px;
    font-size: 13px;
  }

 
  .sortable-ghost
  {
      opacity: 0.2;
  }
/* Left Hand Navigation */

.tcms-main-buttons-div {
    min-width: 100px;
    background-color: #2d2d2d;
    color: #f7f7f7;
    min-height : 100vh;
}

.tcms-main-buttons-div a {
    padding: 1.3rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    transition : all .4s;
}

.tcms-main-buttons-div a:hover  {
    background-color: #202020;
}

.tcms-main-buttons-div a i {
    margin-bottom: .5rem;
}

/* tcms main content */

.tcms-main-content-pane {
    width: 75%;
    background-color: #3E3E3E;
}
/* Title Header  */

.tcms-header-1 {
    width: 100%;
    height: 55px;
    background-color: #3E3E3E;
    color: #fff;
}

.tcms-header-1 > h1 {
    font-size: 1.85rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 1rem;
}

/* Main Navbar */

nav.tcms-navbar {
    height: 40px;
    background-color: #3E3E3E;
    border-color: #959A9A;
    border-style: solid;
    border-width: 2px 0;
    cursor: pointer;

    list-style: none;
    margin: 0;
}

nav.tcms-navbar > a.nav-item {
    padding: 0.25rem 1rem;
    width: 100%;
    min-width: 5px;
    height: 100%;
    font-size: 0.8rem;
    color: #959A9A;
}

nav.tcms-navbar > a.nav-item:hover {
    background-color: #313131;
    transition: all .4s;
    border-color: transparent;
}

nav.tcms-navbar > a.nav-item.nav-link:active,
nav.tcms-navbar > a.nav-item.nav-link.active {
    background-color: #202020;
    border-color: transparent;
    color: #ffffff;
    font-size: 0.95rem;
}


/* Manage Equipment */

.it-manage_equipment,
.it-tcms_repairs {
    width: 100%;
    padding: 1rem 2rem;
    background-color: #202020; 
    height: 100vh;
}

.tcms_table {
    margin: 0; 
    height: 100%;
    }
    .tcms_table__nav {
      background-color: #464646;
      padding: 0; 
      max-height: 80vh;
    }
      .tcms_table__nav_heading {
        width: 100%;
        color: #F5A624;
        font-size: 1.4rem;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
        font-weight: 700; }
      .tcms_table__nav_subheading {
        width: 100%;
        color: #f7f7f7;
        font-size: 0.8rem;
        text-align: left; }
      .tcms_table__nav .nav {
        display: flex;
        flex-direction: row !important;
        height: 100%; }
      .tcms_table__nav .nav-link {
        background-color: #27292A;
        opacity: 0.7;
        border-radius: 0;
        width: 100%; }
        .tcms_table__nav .nav-link.active {
          opacity: 1;
          background-color: #4A4A4A; }
        .tcms_table__nav .nav-link:not(:last-child) {
          border-bottom: 3px solid #7E7E7E; }
    .tcms_table__body {
      background-color: #4A4A4A;
      max-height: 100%;
     }
      .tcms_table__body ul.list-group {
        height: calc(100vh - 285px);
        overflow-y: scroll; }
      .tcms_table__body ul.list-group .badge {
        min-width: 65px; }



.heading_secondary {
    font-size: 2rem;
    color: #fff;
    letter-spacing: .2rem; 
}
    
.heading_tertiary {
    font-size: 1.25rem;
    color: #fff; 
}

.list-group.list-group-dark {
    color: #dee2e6; }
  
  .list-group.list-group-dark .list-group-item-action {
    color: #495057; }
    .list-group.list-group-dark .list-group-item-action:hover, .list-group-item-action:focus {
      color: #495057;
      background-color: #f8f9fa; }
    .list-group.list-group-dark .list-group-item-action:active {
      color: #212529;
      background-color: #e9ecef; }
  
  .list-group.list-group-dark .list-group-item {
    background-color: #303030;
    border: 1px solid #6b6b6b; }
    .list-group.list-group-dark .list-group-item.disabled, .list-group-item:disabled {
      color: #6c757d;
      background-color: #303030; }
    .list-group.list-group-dark .list-group-item.active {
      color: #fff;
      background-color: #2A9FD6;
      border-color: #2A9FD6; }

span.cable-tag-border {
    border: 2px solid #c5c7c9; /* secondary grey */
    border-radius: 5px;
}
/* Draglune Canvas Overlay */
#cableManagementCanvasDragLinesOverlay {
    position: absolute;
    bottom : 0;
    left : 0;
    width : calc(100% - 197px);
    z-index: 5;
}

#draglineOverlayDiv {
    height: 100%;
    overflow-y: hidden;
}

#draglineOverlayDivContent {
    height:calc(100% - 37px); /* Height of the overlay minus the header */
}


#draglineOverlayDivHeader {
    background-color: rgba(15, 68, 117, 0.9);
    padding: 4px 8px;
    color : #fff;
    font-size : 1.25rem;
    text-align: left;
    cursor: pointer;
    transform: translateY(1px); /* Once the cable draglines is body is populated with content, it will not have a height smaller than 1px? this is a fix for that */
}

#draglineOverlayDivBody {
    background-color: #fff;
    overflow-y: scroll;
    height: 286px;
}

/* Cable Management Cable Style */

.cable-condition-border
{
    border-color: #999999;
}
.cable-condition-border[data-condition='10'],
.cable-condition-border[data-condition='9'],
.cable-condition-border[data-condition='8']  {
    border-color : #75d162;
}

.cable-condition-border[data-condition='7'],
.cable-condition-border[data-condition='6'],
.cable-condition-border[data-condition='5'],
.cable-condition-border[data-condition='4'] {
    border-color : #edb443;
}

.cable-condition-border[data-condition='3'],
.cable-condition-border[data-condition='2'],
.cable-condition-border[data-condition='1']  {
    border-color : #ff4d4d;
}

.it-pagination {
    display: flex;
    justify-content: space-between; }
    .it-pagination__item {
      width: 2rem;
      height: 2rem;
      font-size: 1rem;
      border-radius: 100px;
      border-width: 2px;
      border-style: solid;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer; }
      .it-pagination__item.grey {
        color: #999999; }
        .it-pagination__item.grey:hover,
        .it-pagination__item.grey.active {
          background-color: #999999;
          color: #212529;
          border-width: 0px; }
      .it-pagination__item.red {
        color: #ff4d4d; }
        .it-pagination__item.red:hover,
        .it-pagination__item.red.active {
          background-color: #ff4d4d;
          color: #212529;
          border-width: 0px; }
      .it-pagination__item.orange {
        color: #edb443; }
        .it-pagination__item.orange:hover,
        .it-pagination__item.orange.active {
          background-color: #edb443;
          color: #212529;
          border-width: 0px; }
      .it-pagination__item.green {
        color: #75d162; }
        .it-pagination__item.green:hover,
        .it-pagination__item.green.active {
          background-color: #75d162;
          color: #212529;
          border-width: 0px; }

/* From W3Schools https://www.w3schools.com/howto/howto_css_switch.asp */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 4.5rem;
    height: 2.4rem; }
    .switch input {
      display: none; }
    .switch input:checked + .slider {
      background-color: #76A348; }
      .switch input:checked + .slider:after {
        content: "YES";
        font-size: 1rem;
        position: absolute;
        left: .6rem;
        top: .4rem; }
    .switch input:checked ~ span.switch-icon {
      opacity: 0;
      transition: all .2s; }
    .switch input:focus + .slider {
      box-shadow: 0 0 1px #76A348; }
    .switch input:checked + .slider:before {
      -webkit-transform: translateX(2.2rem);
      -ms-transform: translateX(2.2rem);
      transform: translateX(2.2rem); }
    .switch .switch-icon {
      position: absolute;
      font-size: 1.4rem;
      left: 5.4rem;
      top: .3rem;
      transition: all .2s;
      color: #ec582b; }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ec582b;
    -webkit-transition: .4s;
    transition: .4s; }
    .slider:after {
      content: 'NO';
      font-size: 1rem;
      position: absolute;
      right: .7rem;
      top: .4rem; }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 1.6rem;
    width: 1.6rem;
    left: .35rem;
    bottom: .4rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s; }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px; }
  
  .slider.round:before {
    border-radius: 50%; }

.modal.dark {
    color : #fff;
    z-index: 9999;
}

.modal.dark .modal-content {
    background-color: #212529;
}

#cableModal .modal-body,
#substationModal .modal-body,
#draglineModal .modal-body {
    padding: 0 .8rem;
}

#searchModal .list-group-item
{
    background-color: #464646;
}

.cursor-pointer {
    cursor: pointer;
}

.dark_modal_navigation a.nav-link {
    font-size: 1.5rem;
    background-color: #858585  !important;
    color: #fff;
}

.dark_modal_navigation a.nav-link.active {
    font-size: 1.5rem;
    background-color: #464646 !important;
}

.btn-group-dark label {
    background-color: #595959;
    color: #adadad;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    border: none;
    border-width: 0px 2px 0px 0px;
    border-color: #adadad;
    border-style: solid;
}

.btn-group-dark label:last-child {
    border: none;
}

.grey-orange-modal h5, .grey-orange-modal a{
    color: #F5A624;
}

.grey-orange-modal .modal-content  {
    background-color: #4A4A4A;
}

.grey-orange-modal .list-group-item {
    background-color: #4A4A4A;
    color : #f7f7f7;
    border-color: #27292A;
    font-weight: 400;
    cursor: pointer;
}

/* .h-100, .H-100 {
    height: 100%;
} */

.d-none-force
{
    display: none !important;
}

.cable-mangement-dre-div-header {
    touch-action: manipulation;
}

.intelics-fa-checkbox
{
  display: none;
}

.intelics-fa-checkbox + label:before
{
  font-family: "fontawesome";
  display: inline-block;
  content: "\f00d";
  color: #DC3545;
  font-size: 20px;
  width: 20px;
}


.intelics-fa-checkbox:checked + label:before
{
  content: "\f00c";
  color: #28A745;
  font-size: 20px;
  width: 20px;
}