﻿body{
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #4C6581;
    background-color: #fff;
    background-image: none;
    border: thin solid #D4E1F0;
    box-shadow: none;
    border-radius: 4px;
    transition: 0.2s;
}

.content-box .form-control, .content-body .form-control {
    background: #fff;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: #fff;
    color: #4C6581 !important;
}

.form-control:hover {
    background: #fff;
}

.form-control:focus {
    background: #fff;
}

input,
select,
textarea {
    max-width: 400px;
}



/*___Default Classes________________________________________*/

.content-box {
    background: #fff;
    margin: 12px 0px;
    border: thin solid #D4E1F0;
}


.content-body {
    padding: 16px 12px;
}


/*__-Position-_____*/
.Center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: none !important;
}

/*__-Display-_____*/


.Flex {
    display: flex;
}


/*__-Colour-_____*/

.Colour-White, a.Colour-White {
    color: #fff;
}

.Colour-White a {
    color: #6ec1ff;
}


/*__-Margin-_____*/
.Margin-Box {
    margin: 24px;
}

.Margin-Box-sm {
    margin: 12px;
}

.Margin-Box-xsm {
    margin: 6px;
}

.Margin-Left {
    margin-left: 24px;
}

.Margin-Left-sm {
    margin-left: 12px;
}

.Margin-Left-xsm {
    margin-Left: 6px;
}

.Margin-Right {
    margin-right: 24px;
}

.Margin-Right-sm {
    margin-right: 12px;
}

.Margin-Right-xsm {
    margin-right: 6px;
}

.Margin-Top-xl {
    margin-top: 36px;
}

.Margin-Top {
    margin-top: 24px;
}

.Margin-Top-sm {
    margin-top: 12px;
}

.Margin-Top-xsm {
    margin-top: 6px;
}

.Margin-Bottom {
    margin-bottom: 24px;
}

.Margin-Bottom-sm {
    margin-bottom: 12px;
}

.Margin-Bottom-xsm {
    margin-bottom: 6px;
}

.Margin-Z {
    margin: 0px;
}

.Margin-ZT {
    margin-top: 0px;
}

.Margin-ZB {
    margin-bottom: 0px;
}

.Margin-ZL {
    margin-left: 0px;
}

.Margin-ZR {
    margin-right: 0px;
}

/*__-Padding-_____*/

.Padding-Box {
    padding: 24px !important;
}

.Padding-Box-sm {
    padding: 12px;
}

.Padding-Box-xsm {
    padding: 6px;
}

.Padding-Left {
    padding-left: 24px;
}

.Padding-Left-sm {
    padding-left: 12px;
}

.Padding-Left-xsm {
    padding-Left: 6px;
}

.Padding-Right {
    padding-right: 24px;
}

.Padding-Right-sm {
    padding-right: 12px;
}

.Padding-Right-xsm {
    padding-right: 6px;
}

.Padding-Top {
    padding-top: 24px;
}

.Padding-Top-sm {
    padding-top: 12px;
}

.Padding-Top-xsm {
    padding-top: 6px;
}

.Padding-Bottom {
    padding-bottom: 24px;
}

.Padding-Bottom-sm {
    padding-bottom: 12px;
}

.Padding-Bottom-xsm {
    padding-bottom: 6px;
}


/*__-Width-Height-_____*/

.FullWidth {
    width: 100%;
}

.FullMaxWidth {
    max-width: 100%;
}



/*__Borders_____*/

.Border-Basic {
    border: thin solid #D4E1F0;
}




/*__Bootstrap_________________________________________*/

.form-control:hover {
    color: #111;
}























.rangeslider,
.rangeslider__fill {
display: block;
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.rangeslider {
background: #e6e6e6;
position: relative;
}

.rangeslider--horizontal {
height: 12px;
width: 100%;
margin: 12px 0px;
}

.rangeslider--vertical {
width: 20px;
min-height: 150px;
max-height: 100%;
}

.rangeslider--disabled {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
}

.rangeslider__fill {
  
position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
top: 0;
height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
bottom: 0;
width: 100%;
}
.RangeOutput {
font-weight: bold;
text-align: center;
width: 180px;
margin-right: 12px;
padding: 8px 12px;
border: 2px solid #e0e4ea;
border-radius: 4px;
cursor: default;
}

.rangeslider__handle {
background: #2197ef;
border: thin solid #D4E1F0;
cursor: pointer;
display: inline-block;
width: 26px;
height: 26px;
position: absolute;
/*background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));*/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 50%
  
}
.rangeslider__handle:after {
background: #2197ef;
content: "";
display: block;
width: 18px;
height: 18px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
background: #2197ef;
   
}
.rangeslider--horizontal .rangeslider__handle {
top: -7px;
touch-action: pan-y;
-ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle {
left: -10px;
touch-action: pan-x;
-ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
-webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}
.rangeslider--horizontal .rangeslider__handle {
top: -10px; 
touch-action: pan-y;
-ms-touch-action: pan-y;
}
.rangeslider {
background: #D4E1F0;
position: relative;
}
.rangeslider--horizontal {
height: 6px;
width: 100%;
margin: 12px 0px;
box-shadow: none;
border-radius: 0px;
}
.rangeslider__handle{
border: none;
}
.rangeslider__fill{
background: #A6B9CD;
}