@font-face {
    font-family: "Montserrat";
    src: url(../../AddIns/Montserrat/Montserrat-VariableFont_wght.ttf);
    /* src: url(../../AddIns/Montserrat/Montserrat-Italic-VariableFont_wght.ttf); */
}

html {
    min-width: 500px;
    font-family: Montserrat, Verdana, Helvetica, Arial, sans-serif;
    font-weight: 500;
    /*font-size: 100%;/*font-size: 1em;/* or should we have px or pt here?? 16px or 12pt? */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:after, *:before {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

input, select, textarea {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
}

::selection {
    color: white;
}

.arrow-img {
    vertical-align: middle;
    margin: -7px -12px -4px -1px;
    width: 24px;
    height: 24px;
    border: none;
    z-index: 1;
}

.TextOut {
    width: 100%;
    background-color: #F0F0F0;
    border: 1px solid silver;
}

.TextIn {
    width: 100%;
    background-color: white;
    border: 1px solid silver;
}

.UnsupportedBrowserMessage {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    vertical-align: middle;
    background: rgb(200, 10, 10);
    background: rgba(204, 0, 0, 0.7);
    box-shadow: 0 2px 4px 4px rgba(0,0,0,0.2);
    display: none;
}
.UnsupportedBrowserMessage > * {
    margin-left: 2em;
}
.UnsupportedBrowserMessage > ul > li {
    margin-left: 4em;
}

.GenericFlexColumn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

.GenericFlexRow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.GenericFlexRowReverse {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row-reverse wrap;
    flex-flow: row-reverse wrap;
}

.Flex0Auto,
.FlexChildren0Auto > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
}

.Flex10,
.FlexChildren10 > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 0;
    -ms-flex: 1 0;
    flex: 1 0;
}

.Flex20,
.FlexChildren20 > * {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2 0;
    -ms-flex: 2 0;
    flex: 2 0;
}

.Flex40,
.FlexChildren40 > * {
    -webkit-box-flex: 4;
    -moz-box-flex: 4;
    -webkit-flex: 4 0;
    -ms-flex: 4 0;
    flex: 4 0;
}

.Flex4Auto,
.FlexChildren4Auto > * {
    -webkit-box-flex: 4;
    -moz-box-flex: 4;
    -webkit-flex: 4 auto;
    -ms-flex: 4 auto;
    flex: 4 auto;
}

.Flex1Auto,
.FlexChildren1Auto > * {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
}

.FlexUnset,
.FlexChildrenUnset > * {
    -webkit-box-flex: unset;
    -moz-box-flex: unset;
    -webkit-flex: unset;
    -ms-flex: unset;
    flex: unset;
}

.MessagingBoxButton {
    -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
    -moz-transition: all 0.1s ease-in-out; /* Firefox */
    -o-transition: all 0.1s ease-in-out; /* Opera */
    transition: all 0.1s ease-in-out;
}
.MessagingBoxButton:hover {
    -webkit-transform: scale(1.4); /* Safari and Chrome */
    -moz-transform: scale(1.4); /* Firefox */
    -ms-transform: scale(1.4); /* IE 9 */
    -o-transform: scale(1.4); /* Opera */
    transform: scale(1.4);
    border: 1px solid black;
}
.MessagingBoxButton:active {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    -webkit-transform: scale(1.2); /* Safari and Chrome */
    -moz-transform: scale(1.2); /* Firefox */
    -ms-transform: scale(1.2); /* IE 9 */
    -o-transform: scale(1.2); /* Opera */
    transform: scale(1.2);
    border: 1px solid rgb(100, 100, 100);
    border: 1px solid rgba(0, 0, 0, 0.6);
}

.HomemadeStickyMessagingBoxes {
    position: fixed;
    right: 20px;
    z-index: 99999;
    max-width: 750px;
    min-width: 450px;
}

.ConnectMessageBoxError, .ConnectMessageBoxWarning, .ConnectMessageBoxInfo {
    border-width: 5px;
    border-style: solid;
    border-radius: 4px;
    padding: 15px;
}
.ConnectMessageBoxError {
    background-color: rgb(218, 7, 7);
    border-color: rgb(255, 134, 134);
}
.ConnectMessageBoxWarning {
    background-color: rgb(220, 188, 4);
    border-color: rgb(255, 255, 81);
}
.ConnectMessageBoxInfo {
    background-color: rgb(35, 190, 40);
    border-color: rgb(137, 255, 142);
}

.ErrorLabel {
    color: #CB0000;
    border-top: 2px solid #A0A0A0;
    border-bottom: 2px solid #A0A0A0;
    padding: 8px 4px;
    background-color: #F1F1F1;
}

.RegexError {
    font-size: 1rem;
    color: black;
    background-color: rgb(218, 7, 7);
    border: 1px solid black;
    padding: 2px 5px;
}