html {
    font-size: 14px;
}
:root {
    --black: #121212;
    --white: #ffffff;
    --white-500: #ffffff;
    --primary-blue-800: #013378;
    --primary-blue-700: #07417c;
    --primary-blue-600: #2170b6;
    --primary-blue-500: #a3d3f0;
    --primary-blue-400: #daf1fd;
    --primary-blue-300: #eaf8ff;
    --primary-blue-200: #98b6d0;
    --primary-blue-100: #f0f5f8;
    --neutral-black: #121212;
    --neutral-black-900: #121212;
    --neutral-black-800: #111833;
    --neutral-black-700: #46526a;
    --neutral-black-600: #67748f;
    --neutral-black-500: #8d9dbb;
    --neutral-black-400: #afbdd8;
    --neutral-black-300: #d0dceb;
    --neutral-black-200: #dee8f0;
    --neutral-black-100: #dee8f0;
    --red: #f93b2b;
    --red-1000: #66072a;
    --red-900: #7d0a26;
    --red-800: #991329;
    --red-700: #991329;
    --red-600: #d62423;
    --red-500: #f93b2b;
    --red-400: #e86357;
    --red-300: #f28f7a;
    --red-200: #fabda8;
    --red-100: #fce0d1;
    --yellow: #f5ce5b;
    --yellow-1000: #6c1f00;
    --yellow-900: #802b01;
    --yellow-800: #a14002;
    --yellow-700: #bf5701;
    --yellow-600: #de7000;
    --yellow-500: #ec9b3b;
    --yellow-400: #f5ba61;
    --yellow-300: #f5ce5b;
    --yellow-200: #fbd995;
    --yellow-100: #fcecc9;
    --green: #2b8c21;
    --green-900: #054213;
    --green-800: #0a5212;
    --green-700: #136214;
    --green-600: #1b7816;
    --green-500: #2b8c21;
    --green-400: #60ba4f;
    --green-300: #90db76;
    --green-200: #c2f2a8;
    --green-100: #e3fad1;
    --purple: #595aa2;
    --purple-900: #12124d;
    --purple-800: #1c1c5c;
    --purple-700: #3d365c;
    --purple-600: #595aa2;
    --purple-500: #595aa2;
    --purple-400: #8385c7;
    --purple-300: #aaa6d2;
    --purple-200: #c9c9f5;
    --purple-100: #e3e3fa;
    --blue: #0080d1;
    --blue-1000: #002466;
    --blue-900: #013378;
    --blue-800: #004a96;
    --blue-700: #0163b5;
    --blue-600: #006eb7;
    --blue-500: #0080d1;
    --blue-400: #38abe3;
    --blue-300: #61c9f2;
    --blue-200: #93daff;
    --blue-100: #c9f5fc;
}
body {
    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.video-container {
    /* width is set as 100% here. any width can be specified as per requirement */
    width: 100%;
    padding-top: 56.25%; /*Aspect ration 16:9*/
    height: auto;
    position: relative;
}

.video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    outline: none;
    box-shadow: none;
}
/*Overwrite Whoson*/
.wo-chat-btn.online-color {
    background-color: var(--primary-blue-600) !important;
}
/* Overwrite the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

.checkboxlist label {
    padding-right: 35px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

a:focus, a:hover {
    color:#337ab7;
    text-decoration: none;
}
a[disabled=disabled] {
  color:#808080;
}
.aspNetDisabled{
    color:#808080;
}
.aspNetDisabled:hover {
    color:#808080;
}

.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}

.nowrap {
    white-space: nowrap;
}
.absolute {
    position:absolute;
}
.handpointer {
    cursor: pointer !important;
}

.handpointer:hover {
    background-color:#f1efef;
    /*opacity:0.8;*/
}

.nav-tabs li a { font-size:18px; }

.ellipsis {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 90%; /* note that this width will have to be smaller to see the effect. 370px;*/
    }

.control-label::after {
    content:":"
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
    margin-top: 10px;
    font-size: 1em;
    line-height: 30px;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}


select.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}
/*Add Asterisk to required fields */
input[aria-required="true"]:before {
    content: "Required";
    font-weight: bold;
    color: red;
}

.form-group input[required]:invalid {
    border-color: #febfbf;
}

.text-capitalize-smallcaps {
    font-variant: small-caps;
}

.smallcaps {
    font-variant: small-caps;
}
/*borders*/
.border {
    border: 1px solid #eee;
}
.border-radius {
    border: 2px solid #eee;
    border-radius: 8px 8px 8px 8px;
}
.border-bottom {
    padding-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.border-top {
    padding-top: 4px;
    border-top: 1px solid #eee;
}
.border-shadow:hover {
    border-color: #373636;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 20px #a6a6a6;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 20px #a6a6a6;
}

.newline {
    display:block;
}
.inline {
    display:inline;
}

/*Resize Element*/
.resize-both { resize:both; overflow:hidden}
.resize-horizontal { resize:horizontal;overflow:scroll}
.resize-vertical { resize:vertical;overflow:scroll}

/*bootstrap overrides*/
.control-label {
    margin-bottom: 5px !important;
}


/*Remove spinner from number field*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/*For valid invalid
input.data:required
{
    background-color:       rgba(255, 255, 0, 0.04);
}
input.data:not(:focus):valid
{

    color:                  rgba(102, 172, 0, 1);
}
input.data:not(:focus):invalid
{
    color:                  rgb(251, 99, 99);
}
input.data:focus
{
    border:                 5px solid #ff5400;
    background-color:       rgba(255, 255, 255, 1);
}
    */
/* IE10 only
input.data:-ms-input-placeholder:valid,
input.data:-ms-input-placeholder:invalid
{
    font-style:             italic;
    color:                  rgba(0, 0, 0, 0.4)
}
    */

/* Validation */
.list-group{
    z-index:13;
    display:none;
	position:absolute;
    color:red;
}
.msg
{
	position:absolute;
    color:red;
}


.checkunorderlist li {
    list-style: none;
    margin-bottom: 10px;
}
    .checkunorderlist li:before {
        font-family: 'fontawesome';
        content: '\f046';
        margin-right: 10px;
    }
.checkunorderlistlevel2 li {
    list-style: none;
    margin-bottom: 5px;
}

    .checkunorderlistlevel2 li:before {
        font-size: 70%;
        font-family: 'fontawesome';
        content: '\f111';
        margin-right: 10px;
    }

/*Shadow Effects*/
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*#region Effect 8 */
.effect8
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
/*#endregion Effect*/

/*#region Accordion*/
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';  /* essential for enabling glyphicon */
    content: "\f078";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    /*color: grey;*/         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f054";    /* adjust as needed, taken from bootstrap.css */
}
/*#endregion Accordion*/


/*#region Sort*/
.sortasc {
}

    .sortasc:after {
        font-family: "FontAwesome";
        padding-left: 5px;
        content: "\f077";
        float: right;
    }

.sortdesc {
}

    .sortdesc:after {
        font-family: "FontAwesome";
        padding-left: 5px;
        content: "\f078";
        float: right;
    }

/*#endregion Sort*/

/*#region overlay*/
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgb(86, 85, 85);
    background-color: rgba(86,85,85, 0.7);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 0px;
    width: 100%;
    /*text-align: center;*/
    margin-top: 30px;
}

.overlay .closebtn {
    position: absolute;
    top: -10px;
    right: 35px;
    font-size: 40px;
    z-index: 3001;
    color: #dbd9d9;
}

a.closebtn:hover {
    color: #fff;
}

@media screen and (max-height: 450px) {
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

.positiontooverylay {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
}
/*#endregion overlay*/

.iframecustom {
    display: block;
    background: #fff;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}

/*#region Modal*/
/*95 percent*/
.modal95p {
    min-width: 95%;
}
/*#endregion Modal*/

/*Rounded style from FireArts*/
.rounded {
    border-radius: .25rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-3xl {
    border-radius: 1.5rem
}

.rounded-4xl {
    border-radius: 32px
}

.rounded-\[100px\] {
    border-radius: 100px
}

.rounded-\[10px\] {
    border-radius: 10px
}

.rounded-\[18px\] {
    border-radius: 18px
}

.rounded-\[32px\] {
    border-radius: 32px
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-sm {
    border-radius: .125rem
}