/*
	Awesome Responsive Template
	templatestock.co
*/

/* Typography CSS */

body
{
	font-family: "Roboto";
	background-color:#deebfd;
	overflow-x: hidden; /* Hide horizontal scrollbar */
}

h1
{
    margin-left: 10px;
}

.btn
{
    margin-left: 10px;
}

.arioClusterBlock
{
    padding:2%;
    margin:4%;
    border: 4px solid
    DarkSlateGrey;
    border-radius:14px;
    display:none;
}

.arioClusterBlockTight
{
    padding: 3px;
    margin: 3px;
    border: 4px solid
    DarkSlateGrey;
    border-radius:14px;
    display:none;
    max-width: 400px;
}

.arioDeviceBlock
{
    padding:2%;
    margin:4%;
    border: 2px solid
    DarkSlateGrey;
    border-radius:7px;
}

.arioClusterHeading
{
    font-size: larger;
    text-align: center;
}

.arioClusterDeviceImage /* Own class must be "mx-auto arioClusterDeviceImage", parent class must include "text-center" */
{
    width:100%;
    max-width: 150px;
    height:auto;
    margin: 10px auto 2px auto; /* To centre the image. Top, right, bottom, left. */
    align: middle;
}

.arioClusterSubText
{
    color: #59687a;
}

.arioClusterTypeImage /* Own class must be "mx-auto arioClusterTypeImage", parent class must include "text-center" */
{
    width:100%;
    max-height: 145px;
    width:auto;
    margin: auto auto auto auto; /* To centre the image. Top, right, bottom, left. */
    align: middle;
}

.alert
{
    border-radius: 14px;
    margin: 6px;
}

.modal-content
{
    border-color: Black;
    border: 6px solid;
    border-radius:14px;
    margin: 5px;
}

.modal-header
{
    background-color: #59687a;
    color: White;
}

.modal-body
{
    background-color: #9ba4af;
}

.modal-footer
{
    background-color: #9ba4af;
}

.input-group
{
    border-radius: 7px;
    margin: 5px;
}

.input-group-addon
{
    padding: 5px;
    background-color: Grey;
    color: White;
    min-width: 75px;
    height: 38px;
}

.input-group-details
{
  font-size:smaller;
  margin-top:1ch;
  padding: 10px 0 0 10px;
}

.arioDeviceDataAloneDiv
{
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    border-radius: 14px;
    max-width: 400px;
}

.arioClusterBlockShadowed
{
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    padding:2%;
    margin:4%;
    border-radius:14px;
    display:none;
}

.arioPageHeading
{
    margin: 10px 0px 10px 0px;
    width:100%;
    text-align: center;
    color: #59687a;
}

.arioDeviceDataOuterDiv
{
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    border-radius: 14px;
    width: 400px;
}

.arioDeviceDataOuterDivWide
{
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    border-radius: 14px;
    /* max-width: 600px; */
    width: auto;
    margin:auto;
}

.arioDeviceDataOuterDivVeryWide
{
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    border-radius: 14px;
    max-width: 1200px;
    width: auto;
    margin:auto;
}


.arioHistoryGraphDiv
{
    margin: auto;
    background-color: white;
    box-shadow: 3px 3px 3px #59687a;
    border-radius: 14px;
}

.arioDeviceDataInnerCollapseButton
{
    background-color: white;
    border-radius: 14px;
    width: 100%;
    box-shadow: 2px 2px 2px #59687a;
    margin-bottom: 10px;
}

.arioDeviceDataTable td
{
    padding: 0 15px;
    width:100%;
    min-width: 60px;
}

.arioAlarmTable
{
    width: 100%;
}
.arioAlarmTable td
{
    padding: 0 15px;
    min-width: 60px;
}

.arioSpacedTable
{
    width:100%;
    table-layout:fixed;
}
.arioSpacedTable td
{
    padding: 0 10px;
}

.input-group>.form-control {
    min-width: 70px;   /* minimum width to display a value */
}

.arioImageOnButton
{
    margin-right: 5px;
}

.grayout
{
    opacity: 0.45;
    filter: alpha(opacity = 45);
}

#createDevicesInfo {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.arioDeviceDataInnerDivDataOverflow
{
  max-height: 700px;
  overflow-y: auto;
}