:root {--color-primary: #3E55FF; --color-secondary: #3E55FF; --color-tertiary: #EB4149; --color-rfv:#EB4149}
.primary{color: var(--color-primary); }
.secondary{color: var(--color-secondary)}
.tertiary{ color: var(--color-tertiary)}

@font-face {font-family: "Muli"; src: url("https://argentasoftware.com/fonts/Muli.eot"); src: url("https://argentasoftware.com/fonts/Muli.eot?#iefix") format("embedded-opentype"), url("https://argentasoftware.com/fonts/Muli.svg") format("svg"), url("https://argentasoftware.com/fonts/Muli.ttf") format("truetype"), url("https://argentasoftware.com/fonts/Muli.woff") format("woff"), url("https://argentasoftware.com/fonts/Muli.woff2") format("woff2"); font-weight: normal; font-style: normal}

.orange{ color:#FF4A11 !important }
.black{color:#000}
.gray{color:#2F3035}
.light{color:#CCC}
.red{color: var(--color-tertiary) !important}
.white{color:#FFF !important}

.bg-color-white {background: #FFF}
.bg-color-blue {background: #3E55FF}

.font-70{font-size:70%}
.font-75{font-size:75%}
.font-90{font-size:90%}
.font-120{font-size:120%}
.bold{font-weight:bold}

body, html {height: 100%}
body {font-family:'Inter', sans-serif; color:#7D8D98}
h1{font-family: 'Anton', sans-serif; font-size:48px; color: var(--color-primary)}
h2{font-family: 'Inter', sans-serif; font-size:22px; font-weight:bold; color: var(--color-primary)}
h3{font-family: 'Anton', sans-serif; font-size:30px; color: var(--color-primary)}
p{color:#2F3035}
.form-group{font-size:75%; color:#000}
 .grid-title{display:block; margin:0; font-weight:bold}
 .grid-label{display:block; margin:0}

textarea, input[type="text"]{font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight:500 !important}
a.no-underline{text-decoration:none !important}
a.link{color: var(--color-primary); text-decoration:underline; font-weight:bold}
a.link:hover{color: var(--color-primary); text-decoration:underline; font-weight:bold}
a.bread-crumb{color:#7D8D98; text-decoration:none}
a.bread-crumb:hover{color: var(--color-primary); text-decoration:none; font-weight:bold}
a.bread-crumb-selected{color: var(--color-primary); text-decoration:none; font-weight:bold}

aside{display:block; width:15%; margin-top:0; background-color:#2F3035; min-height:700px}
.mobile-nav-buttons{display:none;}
.logo{max-width:14.6%}
@media screen and (max-width:1200px) {aside{display:none} .mobile-nav-buttons{display:block; } .logo{max-width:80%}}
@media screen and (max-width:768px) {.logo{max-width:95%; width:95%; margin-left:5%}}
.card{background-color:#2F3035; font-size:85%; color:#FFF}
.card-header{padding: .30rem .10rem .30rem 1.5rem !important; border-bottom:1px solid #CCC; cursor:pointer}
.card-header a{color:#FFF}
.card-body{padding: .30rem .10rem .30rem 1.5rem !important; background-color:#FFF}
.card-body a{color:#2F3035}
.card-body a:hover{color:#FFF}
#accordion li a{display:block; padding:1% 0}
#accordion li{padding:1%}
#accordion li:hover{background-color:#2F3035}
#accordion a{text-decoration:none !important; font-family: 'Inter', sans-serif !important}
#accordion a[data-toggle="collapse"] {position: relative}

main{width:85%}  
@media screen and (max-width:1200px) {main{width:95%; margin-top:0px; margin-left:2.5%}}
header{width:100%; height:80px; padding-top:10px; padding-right:25px; border-bottom:1px solid #2F3035; font-size:80%; color:#464646}
section{margin-right:auto !important; margin-left: auto!important; padding-top:2%; padding-right:3%; padding-left:2%;}

nav{margin-top:5%; padding-top:1.5%; padding-bottom:3%; background-color:#E1ECF4}
.nav-box{min-height:190px; margin:1%; padding:3%; background-color:#FFF}
a.nolink{color:#2F3035}
a.nolink:hover{text-decoration:none}
.nav-title{border-bottom:4px solid #3E55FF; font-size:150%; font-weight:bold;}

.page-title{margin-top:0 !important; margin-bottom:0; padding:.7% 1%; font-family:'Inter', sans-serif; font-size:140%; color:#FFF; background-color: var(--color-primary)}
.border-all{border:solid 1px #CCC !important; margin:.20%; padding:1% !important}
.border-bottom{border-bottom:solid 1px #CCC !important; padding-bottom:3px !important}
.border-top{border-top:solid 1px #CCC !important; padding-top:3px !important}
.metric-box{border:solid 1px #CCC !important; margin:.20%; padding:2%; min-height:150px; color:#2F3035}
.metric-box a{color: var(--color-primary)}  .metric-box a:hover{color:#2F3035}

button:focus {outline:0;}
.btn-blue{background:#3E55FF; color:#FFF}
.btn-blue:hover{background:#5C6FFD; color:#FFF}
.form-button {width:100%; padding:16px 10px; background-color: var(--color-tertiary); font-family: 'Inter', sans-serif; font-size: 100%; color: #FFF; text-align:center; cursor: pointer}
.submit-button {min-width:200px; padding:16px 10px; background-color: var(--color-tertiary); font-family: 'Inter', sans-serif; font-size: 100%; color: #FFF; text-align:center; cursor: pointer}

.checkbox label:after, .radio label:after {content: ''; display: table; clear: both}
.checkbox .cr, .radio .cr {position:relative; display:inline-block; border:1px solid #646464; border-radius:.25em; width:1.3em; height:1.25em; float:left; margin-right:.5em }
.radio .cr {border-radius:50% }
.checkbox .cr .cr-icon, .radio .cr .cr-icon { position: absolute; font-size:1.2em; line-height: 0; top:55%; left:5% }
.checkbox label input[type="checkbox"], .radio label input[type="radio"] { display: none }
.checkbox label input[type="checkbox"] + .cr > .cr-icon, .radio label input[type="radio"] + .cr > .cr-icon { transform: scale(3) rotateZ(-10deg); opacity: 0; transition: all .2s ease-in }
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1 }
.checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr { opacity: .5 }
.cbl label{margin:0 5px}
.cbl li{width:100%}

.page-holder {min-height: 100vh}
.bg-cover {background-size: cover !important}
.control {display:block; width:100%; border:1px solid #CCC; outline:none; border-radius: 4px; padding: 6px 2px; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight:500 !important }  /*styles the payment input text boxes appropriately*/

#logo{margin-left:5%}
#phone {margin-right: 5%; font-size: 14px}

.login-container{margin-top:25% !important}
.signup-container{margin-top:10% !important}
.login-box, .signup-box{width:90%}
.login-button {width:75%; padding:16px 10px; background-color: #3E55FF; font-family: 'Inter', sans-serif; font-size: 100%; color: #FFF; text-align:center; cursor: pointer}
@media screen and (min-width:800px) {.login-box, .signup-box{width:70%}.login-container{margin-top:50% !important}}
@media screen and (min-width:992px) {.login-container{margin-top:10% !important} .signup-container{margin-top:3% !important} .login-box{width:35%} .signup-box{width:60%}}

a.category-white {border:5px solid #3E55FF; margin-top: -1px; background: #FFF; padding: 20px; text-align: center; overflow: hidden; display: block; margin-right: -1px; transition-property: border; transition-duration: .50s; transition-timing-function:ease-out}
a.category-white:hover {text-decoration: none; border:5px solid #EB4149; color: var(--color-tertiary)}
.category-white .icon{width: 64px; height: 64px; display: inline-block; background-color: var(--color-primary); color:#FFF; border-radius: 50%; margin-top: 5px; margin-bottom: 15px; transition-property:background-color; transition-duration: .50s; transition-timing-function:ease-out}
a.category-white:hover .icon{background-color: var(--color-tertiary); color:#FFF}
a.category-blue {border:5px solid #FFF; margin-top: -1px; background: #3E55FF; color:#FFF; padding: 20px; text-align: center; overflow: hidden; display: block; margin-right: -1px; transition-property:background; transition-duration: .50s; transition-timing-function: ease-out;}
a.category-blue:hover {text-decoration: none; border:5px solid #FFF; background: #EB4149; color:#FFF}
.category-blue .icon {width: 64px; height: 64px; display: inline-block; background-color:#FFF; color: var(--color-primary); border-radius: 50%; margin-top: 5px; margin-bottom: 15px; transition-property: background-color; transition-duration: .50s; transition-timing-function:ease-out}
a.category-blue:hover .icon{background-color:#FFF; color: var(--color-tertiary)}

a.category-red {border:5px solid #FFF; margin-top:-1px; background: #EB4149; color:#FFF; padding: 20px; text-align: center; overflow: hidden; display: block; margin-right: -1px; transition-property:background; transition-duration: .50s; transition-timing-function: ease-out;}
a.category-red:hover {text-decoration: none; border:5px solid #FFF; background: #3E55FF; color:#FFF}
.category-red .icon {width:75px; height:75px; display: inline-block; background-color:#FFF; color: var(--color-tertiary); border-radius: 50%; margin-top: 5px; margin-bottom: 15px; transition-property: background-color; transition-duration: .50s; transition-timing-function:ease-out}
a.category-red:hover .icon{background-color:#FFF; color: var(--color-primary)}
    
.amounts, .amounts-first, .amounts-full {background-color: #3E55FF}
.amounts:hover, .amounts-first:hover, .amounts-full:hover, .amounts-selected-first, .amounts-selected, .amounts-full-selected{background-color: var(--color-tertiary)}
.cc-icon{color: var(--color-primary)}
.rfv{margin-right:3px !important; color: var(--color-rfv)}

.solid-line-top{ border-top:solid 5px #08125A}
.solid-line-bottom{ border-bottom:solid 5px #08125A}
.dashed-line-top{border-top:dashed 5px #EB9532}
.dashed-line-bottom{border-bottom:dashed 5px #EB9532}

.side-box{padding:1.25rem; border: 1px solid #ACBDC9; border-radius: 2px 2px 0px 0px; }

.breadcrumbs {list-style: none; display: inline-block}
.breadcrumbs li {float: left; color: #CCC; background: #F1F1F1; position: relative; height: 40px; line-height: 40px; padding: 0 10px 0 5px; text-align: center; margin-right: 23px}
.breadcrumbs li:nth-child(even) a {background-color: #F1F1F1}
.breadcrumbs li:nth-child(even) a:before {border-color: #F1F1F1; border-left-color: transparent}
.breadcrumbs li:nth-child(even) a:after {border-left-color: #F1F1F1}
.breadcrumbs li:first-child a {padding-left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px}
.breadcrumbs li:first-child a:before {border: none}
.breadcrumbs li:last-child {padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0}
.breadcrumbs li:last-child:after {border: none}
.breadcrumbs li:before, .breadcrumbs li:after {content: ""; position: absolute; top: 0; border: 0 solid #F1F1F1; border-width: 20px 10px; width: 0; height: 0} /*tail*/
.breadcrumbs li:before {left: -20px; border-left-color: transparent}
.breadcrumbs li:after {left: 100%; border-color: transparent; border-left-color:#F1F1F1}

.breadcrumbs li.active {background-color: #3E55FF; color:#FFF}
.breadcrumbs li .icon {color:#FFF}
.breadcrumbs li.active:before {border-color: #3E55FF; border-left-color: transparent}
.breadcrumbs li.active:after {border-left-color: #3E55FF}

/*TELERIK STYLE SHEET**************************************************************************************/
.radwindow{float:left; clear:both; margin:30px 20px 30px 15px}
 a.rwIcon{display: none !important; background-image: none !important}
 .TelerikModalOverlay{width:100% !important; height:100% !important}

/*RAD-TEXTBOX************/
.RadInput{width:100% !important}
.style1  .riTextBox{width:100% !important}
.RadInput input.riTextBox {font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight:500 !important}

/*RAD-COMBOBOX************/
/*div.RadComboBoxDropDown {font-family: 'Inter', sans-serif !important; font-size: 12px !important;font-weight:500 !important; color:#000 !important}
div.RadComboBoxDropDown .rcbHeader {font-family: 'Inter', sans-serif !important; color:#000 !important}
div .RadComboBoxDropDown .rcbItem {font-family: 'Inter', sans-serif !important; color:#000 !important}
div.RadComboBoxDropDown .rcbFocused{font-family: 'Inter', sans-serif !important; color:#000 !important}
div.RadComboBox .rcbInputCell .rcbEmptyMessage{font-family: 'Inter', sans-serif !important; color:#000 !important}
div.RadComboBox .rcbInput {font-family: 'Inter', sans-serif !important; font-size:12px !important; font-weight:500 !important; color:#000 !important}*/

/*RAD-COMBOBOX************/
div.RadComboBox .rcbInputCell .rcbEmptyMessage {font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-style: normal; color: #000}
div.RadComboBox .rcbInput {font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight:bold !important}

div.RadComboBox:hover .rcbArrowCell a {color:#E6E6E6 !important; } /*solves the text in arrow cell issue*/
div.RadComboBox:focus .rcbArrowCell a {color:#E6E6E6 !important; }  /*solves the text in arrow cell issue*/
div.RadComboBoxDropDown:hover .rcbArrowCell a {color:#E6E6E6 !important; } /*solves the text in arrow cell issue*/
div.RadComboBox .rcbArrowCell a{color:#FFF !important; font-size:0 !important} /*solves the text in arrow cell issue*/
div.RadComboBox .rcbArrowCell:hover a:hover{color:#E6E6E6 !important} /*solves the text in arrow cell issue*/

div.RadComboBoxDropDown .rcbHeader {font-family: 'Inter', sans-serif !important; font-size: 13px !important;  font-weight:bold !important}
div.RadComboBoxDropDown .rcbItem {font-family: 'Inter', sans-serif !important; font-size: 13px !important; padding-left:14px !important;  font-weight:bold !important} /*items in the list -- setting padding-left stops the jarring on select*/
div.RadComboBoxDropDown .rcbFocused {font-family: 'Inter', sans-serif !important; font-size: 13px !important;  font-weight:bold !important}
div.RadComboBoxDropDown {font-family: 'Inter', sans-serif !important; font-size: 13px !important;  font-weight:bold !important}
div.RadComboBox .rcbDisabled .rcbInputCell {background-color:#F1F1F1 !important} /*ddl bground color when disabled*/
div.RadComboBox .rcbDisabled .rcbArrowCell {background-color:#F1F1F1 !important} /*ddl arrow cell bground color when disabled*/
div.RadComboBox .rcbDisabled .rcbArrowCell:hover {background-color:#F1F1F1 !important} /*ddl arrow cell when hovered bground color when disabled*/
div.RadComboBoxDropDown img{max-width:20px} /*size of an image displayed in a RadComboBox*/

 /*RAD-BUTTON************/
.RadButton .fas, .RadButton .fab, .RadButton .fal, .RadButton .far {margin-right:6px !important} /*this is the distance between the icons and the text on all RadButtons*/ 
.RadButton {font-family: Muli !important; font-size:13px !important; color: #646464 !important; line-height:21px !important; border:1px solid #D5D5D5 !important; box-shadow:none; padding-right:8px !important; padding-left:6px !important; background-image: linear-gradient(#EEE, #f7f7f7 100%) !important;}
.RadButton:hover {background-image: linear-gradient(#CCC, #F1F1F1 100%) !important;}

/*RAD-GRID************/
div.RadGrid{width:100%; margin-top:.5%; border:1px #CCC solid}
div.RadGrid .rgHeader {border-right:0 !important; border-left:0 !important; border-bottom:2px #3E55FF solid !important; color:#4A3C3B !important; font-family: 'Inter', sans-serif !important; font-size:12px !important}
 div.RadGrid .rgHeader a{color: #4A3C3B !important; font-family: 'Inter', sans-serif !important; font-size:12px !important}
 div.RadGrid th.rgSorted {color: #4A3C3B !important; font-family: 'Inter', sans-serif !important; font-size:12px !important}
 div.RadGrid th.rgSorted a {	color: #4A3C3B !important; font-family: 'Inter', sans-serif !important; font-size:12px !important}
 div.RadGrid td.rgRow a{font-family: 'Inter', sans-serif !important; font-size: 12px !important}
div.RadGrid .rgRow td {border-right:0 !important; border-left:0 !important; padding-top:.50% !important; padding-bottom:.50% !important; font-family: 'Inter', sans-serif !important; font-size:12px !important} /*data item cell*/
div.RadGrid .rgAltRow td {border-right:0 !important; border-left:0 !important; padding-top:.50% !important; padding-bottom:.50% !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important} /*data item alternating cell*/
div.RadGrid .rgRow td ul, div.RadGrid .rgRow td ol {padding-left:4%} /*data item cell ul or ol*/
div.RadGrid .rgAltRow td ul, div.RadGrid .rgAltRow td ol {padding-left:4%} /*data item alternating cell ul or ol*/
div.RadGrid .rgRow td a{font-family: 'Inter', sans-serif !important; font-size: 12px !important; color:#FF4A11} /*links in the data item cells*/
div.RadGrid .rgAltRow td a{font-family: 'Inter', sans-serif !important; font-size: 12px !important; color:#FF4A11} /*links in the data item alternating cells*/
div.RadGrid .rgRow td a:hover{font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: var(--color-primary) !important} /*links in the data item cells*/
div.RadGrid .rgAltRow td a:hover{font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: var(--color-primary) !important} /*links in the data item alternating cells*/

/* BOOTSTRAP BREAKPOINTS..........................
@media screen and (max-width:1200px){}
@media screen and (max-width:992px) {}
@media screen and (max-width:768px) {}
@media screen and (max-width:576px) {}
@media screen and (max-width:400px) {}
*/