@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

div.ui-datepicker {
    z-index: 10003 !important;
}

input.ui-igedit-input {
    color: #444 !important;
}

/*.modal {*/
/*    overflow-y: scroll !important;*/
/*}*/

html {
    height: 100%;
}

body {
    /*margin: 100px 0 0 0;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
	background-color: #222; 
}

/*.side-nav{*/
/*    margin-top: 38px !important;*/
/*}*/

@media screen and (min-width:992px) {
    body {
        margin-top: 90px;
    }
}

@media screen and (max-width:991px) {
    body {
        margin-top: 55px;
    }
}

.ui-iggrid table th, .ui-iggrid table td {
    word-break: break-word;
}

.alignbottom{
    position: absolute;
    top: 25px;
}

.alignleft {
	float: left;
}

.alignright {
	text-align: right;
}

.aligncenter {
	text-align: center;
}

.light-gray-background{
    background-color: #999;
}

a:link, a:visited, a:active, a:focus {
	color: #f26329;
	text-decoration: none;
	text-transform: none;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

a:hover {
	color: #222;
}

p {
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
}

/*h2 {*/
/*	text-transform: uppercase;*/
/*	letter-spacing: 3px;*/
/*	color: #333;*/
/*	font-weight: 800;*/
/*}*/

.ms-choice, .ms-choice:focus {
    border: 0px solid #aaa !important;
}

/*************************************************************************/
/*LOGIN*/

.hdr {
	position: relative;
}

header {
    width: 100%;
    height: auto;
	min-height: 100%;
    padding-bottom: 0;
    padding-left: 0%;
	position: absolute;
	visibility: visible;
	overflow: hidden;
	display: inline;
	margin:-100px 0 0 0;
    z-index: -1;

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: .9s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .9s;

    animation-name: dropHeader;
    animation-iteration-count: once;
    animation-timing-function: ease-in;
    animation-duration: .9s;

}

header:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 0px;
    border-bottom: 730px solid transparent;
    border-left: 1690px solid #ddd;
}

@-moz-keyframes dropHeader {0% { top: -1200px; } 100% {top: 0; }}
@-webkit-keyframes dropHeader {0% { top: -1200px; } 100% {top: 0; }}
@-o-keyframes dropHeader {0% { top: -1200px; } 100% {top: 0; }}
@keyframes dropHeader {0% { top: -1200px; } 100% {top: 0; }}


#login {
    padding-top: 50px;
    max-width: 735px;
    margin: 0 auto;
}

#login p {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	margin: 20px auto 10px 0;
}
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.fone {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.ftwo {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.fthree {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.box {
	width: auto;
	height: 100%;
	min-height: 300px;
	background-color: rgba(255,255,255,.9);
	border: 10px solid rgba(0,0,0,.1);
	margin: 40px 0;
}

.brand img {
    max-width: 100%;
}

#btm {
	color: #eee;
	font-size: 10px;
	letter-spacing: 1px;
}

#btm a:hover {
	color: #fff;
}

#sidebar-menu-toggle-button{
    position: absolute;
    top: 40px;
    cursor: pointer;
    font-size: 18px;
}

#sidebar > ul {
    display: block;
}

/*LOGIN*/
/*************************************************************************/

/* #Page Styles
================================================== */

@media screen and (min-width:992px) {
    /*#wrapper {
        padding-left: 225px;
    }*/

    #page-wrapper {
        padding: 0px 10px 10px 225px;
    }

    .navbar-toggle {
        display: none;
    }

    /*#sidebar-menu-toggle-button{
        position: absolute;
        top: 40px;
        cursor: pointer;
        font-size: 18px;
    }*/
}

@media screen and (max-width:991px){
    /*#wrapper {
        padding-left: 0px;
    }*/

    #page-wrapper {
        width: 100%;
        padding-left: 0px;
        background-color: #F6F6F6;
    }

    .navbar-toggle {
        float: none;
    }

    #sidebar{
        padding-left: -225px;
    }

    #sidebar-menu-toggle-button{
        display: none;
    }
}

/* Overflow Viewport Height */

.huge {
    font-size: 50px;
    line-height: normal;
}

/* Tree Node CSS */

.ui-igtree {
    margin: 20px 0;
    border: 1px solid #eee;
}

.ui-igtree a {
    font-size: 18px;
}

.ui-igtree a.ui-state-hover, .ui-igtree a.ui-state-focus {
    border: none !important;
    background-color: #eeeeee !important;
}

.ui-igtree-expander {
    top: 1em;
    margin-top: -6px;
}

.spriteFolder {
    background-image: url('../images/folder_24.png');
    background-repeat: no-repeat;
    background-position: center;
    opacity: .9;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    vertical-align: sub;
}      

.spriteDocument    {
    background-image: url('../images/file_24.png');
    background-repeat: no-repeat;
    background-position: center;
    opacity: .9;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    vertical-align: sub;
}    


/*File Uploads*/
.drag-and-drop-zone {
    background-color: transparent;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}


    .drag-and-drop-zone.active > div > div > button{
        height: 200px !important;
        width: 350px !important;
        background-color: #087fa6 !important;
        -webkit-transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
        color: #fff;
    }

    .drag-and-drop-zone.active.hover > div > div > button{
        background-color: #188fda !important;
        color: #fff;
    }
 


/* Footer */

footer a:hover {
    color: #eeeeee;
}



/* #Form Styles
================================================== */


.ui-iggrid > .btn {
    max-width: 34px;
    min-width: 34px;
    margin: 2px;
}

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

.btn { 
    color: #eee !important;
    margin: 2px;
}

tbody > tr > td > .btn-sm {
    margin: 2px 0px 2px 0px;
    min-width: 32px;
    max-width: 32px;
    padding: 2px 7px;
    text-align: center;
    align-content: center;
    height: 32px;
}

tbody > tr > td > span > .btn-sm {
    margin: 2px 0px 2px 0px;
    min-width: 32px;
    max-width: 32px;
    padding: 2px 7px;
    text-align: center;
    align-content: center;
    height: 32px;
}

.btn-align-bottom {
    margin-top: 25px;
}

.btn-dropdown {
    background-color: transparent;
    color: #333 !important;
    text-align: left !important;
}

.btn-dropdown:hover {
    color: #606060 !important;
}

.btn-dark-green {
    background-color: #07512C !important;
    border: 2px solid #07512C ;
  
    color: #fff !important;
}

.user-menu-anchor {
    margin-top: 10px !important;
    font-size: 18px !important;
}

.dropdown-menu-offset-left{
    left: -40px !important;
}

/*.fa {
    margin-right: 6px !important;
}*/

span.ui-iggrid-headertext {
    color: #fff !important;
}

.ui-widget-header {
    background: #454545 !important;
    color: #fff !important;
}

.user-menu-dropdown{
    min-width: 180px !important;
    font-size: 18px;
}

/* Captcha */

input#WebCaptcha1__editor {
    width: auto !important;
    padding: 6px 12px;
    border: 1px solid #CBCBCB;
    float: left;
    margin:5px 0;
}

.igc_CaptchaImageArea img {
    width: 100%;
}

.igc_RefreshAndAudioButtonsArea {
    text-align: right;
    margin: 7px 0;
}

/*.logo-lg{*/
/*    display: block;*/
/*    max-width: 260px !important;*/
/*    */
/*}*/

/*.logo-sm{*/
/*    display: block;*/
/*    width: 130px !important;*/
/*    margin: 0px;*/
/*    margin-left: 20px;*/
/*	padding-bottom: 10px;*/
/* #Navigation
================================================== */

@media screen and (min-width: 992px){
    /*.logo-lg{
        display: block;
    }

    .logo-sm{
        display: none;
    }*/

    .top-nav {
        padding: 0 15px 0 5px;
	    min-height: 85px;
    }
}

@media screen and (max-width: 991px){
    /*.logo-lg{
        display: none;
    }

    .logo-sm{
        display: block;
        width: 30px !important;
        margin: 0px;
    }*/

    /*.logo-sm{
	    padding-bottom: 10px;
        margin-left: 20px;
    }*/

    .top-nav {
        padding: 0 10px 0 15px !important;
	    /*min-height: 85px;*/
    }
}

/*.logo {
	width: 225px;
	padding: 0;
    margin-left: 20px;
}*/

/*.logo img {*/
/*	width: 100%;*/
/*	padding: 0;*/
/*	margin-left: -17px;*/
/*}*/

.top-nav>li {
    display: inline-block;
}

.top-nav>li>a {
    /*padding-top: 15px;*/
    padding-bottom: 0px;
    line-height: 20px;
    color: #999;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: transparent;
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.quick-action-dropdown{
    width: auto !important;
}

.top-nav>.open>.dropdown-menu>li>a {
    white-space: normal;
    padding: 5px 20px;
}

ul.message-dropdown {
    padding: 0;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

li.message-preview {
    width: 275px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}

li.message-preview>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

li.message-footer {
    margin: 5px 0;
}

ul.alert-dropdown {
    width: 300px !important;
    font-size: 11px;
    left: -60px;
}

ul#ULAlertDropDown {
    height: 450px;
    min-height: 100%;
    overflow-x: scroll;
}

@media (min-width: 992px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 991px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 992px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .navbar-nav.navbar-right:last-child {
    margin-right: -15px;
  }
}

/* Side Navigation */

/*@media(min-width:992px) {*/
/*    .side-nav {*/
/*        position: fixed;*/
/*        top: 90px;*/
/*        left: 225px;*/
/*        width: 225px;*/
/*        margin-left: -225px;*/
/*        border: none;*/
/*        border-radius: 0;*/
/*        overflow-y: auto;*/
/*        background-color: #222;*/
/*    }*/

/*    .side-nav>li>a {*/
/*        width: 225px;*/
/*    }*/

/*    .side-nav li a:hover,*/
/*    .side-nav li a:focus {*/
/*        outline: none;*/
/*        background-color: #000 !important;*/
/*    }*/
/*}*/

/*.side-nav>li>ul {*/
/*    padding: 0;*/
/*}*/

/*.side-nav>li>ul>li>a {*/
/*    display: block;*/
/*    padding: 10px 15px 10px 38px;*/
/*    text-decoration: none;*/
/*    color: #999;*/
/*}*/

/*.side-nav>li>ul>li>a:hover {*/
/*    color: #fff;*/
/*}*/


/* Custom Colored Panels */

.huge {
    font-size: 40px;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green a {
    color: #5cb85c;
}

.panel-green a:hover {
    color: #3d8b3d;
}

.panel-red {
    border-color: #d9534f;
}

.panel-red .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red a {
    color: #d9534f;
}

.panel-red a:hover {
    color: #b52b27;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow a {
    color: #f0ad4e;
}

.panel-yellow a:hover {
    color: #df8a13;
}


/* Footer */

footer {
	color: #aaa;
	margin: 30px 0;
	clear: both;
}

.footer a {
	font-size: 10px;
}

/* #Media Queries
================================================== */

@media screen and (max-width: 1366px) , screen and (max-height: 768px) {
	header:after {
        border-bottom: 650px solid transparent;
        border-left: 1200px solid #eeeeee;
	}		
	#login {
        padding-top: 10px;
	}
}

	@media only screen and (max-width: 959px) {}

	@media only screen and (min-width: 768px) and (max-width: 959px) {
	header:after {
        border-bottom: 500px solid transparent;
        border-left: 800px solid #eeeeee;
	}
	.container {
		margin: 0 auto;
	}	
		}

	@media only screen and (max-width: 767px) {}


	@media only screen and (min-width: 480px) and (max-width: 767px) {
	header:after {
border-bottom: 500px solid transparent;
border-left: 600px solid #eeeeee;
	}	

	.container {
		margin: 0 0 0 7%;
	}		
		}


@media only screen and (max-width: 479px) {
    header:after {
        border-bottom: 500px solid transparent;
        border-left: 800px solid #eeeeee;
    }
    .navbar-header {
    width: 100px;
    float: right;
    }
    .alignleft {
        float: none;
        text-align: left;
    }

    .container {
        width: 100%;
        margin: 0 auto;
    }
}

/* z-index bug fix for date picker element */
.ui-datepicker{
    z-index: 1050 !important;
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

.modal-xlg {
      width: 90% !important;
  }

#LIQuickActions > ul {
    width: 300px !important;
}

.badge-notify{
   background:red;
   position:relative;
   top: -7px;
   left: -8px;
}

.navbar-fixed-top, .navbar-fixed-bottom {
    position: absolute !important;
}

/*@media (min-width: 992px) {*/
/*    .side-nav {*/
/*        position: absolute !important;*/
/*    }*/
/*}*/

 .panel.panel-default > .panel-heading {
    cursor: pointer;
}

.noselect {
  -webkit-user-select: none;
  /* Chrome/Safari */

  -moz-user-select: none;
  /* Firefox */

  -ms-user-select: none;
  /* IE10+ */

}


.panel-group{
    margin-bottom: 15px !important;
}

.page-header{
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    padding: 0px !important;
}

.disabled-div{
    cursor: not-allowed;
    background-color: #eee;
}

.bordered-div{
    border: 1px solid #ccc;
    padding: 10px;
}

li.nav-item.active > a.nav-link{
    background-color: #087fa6;
    color: white !important;
}

.input-group-addon{
    cursor: pointer !important;
}

.red-text {
    color: red !important;
}

.green-text {
    color: #a84a4a !important;
}

/*.green-text {*/
/*    color: green !important;*/
/*}*/

.cursor-pointer {
    cursor: pointer !important;
}

.transparent-input{
    background-color: #fff !important;
    border: none !important;
    cursor: default !important;
}

input[type=radio].form-control{
    width: 25px;
}

/*multiple select*/
div.ms-parent{
    width: 100% !important;
    padding-left: 0px !important;
}

btn.ms-choice:focus {
    border: 0px solid #aaa;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.ms-drop ul li:hover {
    background-color: lightgray !important;
}

#DIVCSClaims .ms-drop ul li span {
    display: inline-block !important;
    width: 100% !important;
}

#DIVCSClaims .ms-drop ul li label input[type='checkbox'] {
    margin-top: -40px !important;
    margin-right: 10px !important;
}

div[data-id='market-split-dropdown-container'] li:not(.group):not(.ms-select-all) {
    margin-left: 20px !important;
}

div.ms-drop li.group input {
    margin-right: 3px;
}

div.ms-drop li:not(.group) input {
    margin-right: 15px;
}

/* New CSS added for main page layout //////////////////////////////////////////////////////////*/


.igGrid_addButton_container {
    padding: .5rem ;
    position: absolute;
    z-index: 100;
    background-color: #444;
    display: flex;
    
}

.igGrid_addButton_container input {
    background-color: #666 !important;
    flex-grow: 1;
}

.side-nav>li {
    width: 100%;
    padding: 0;
    color: #333;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #999;
}

.side-nav>li>ul>li>a:hover {
    color: #fff;
}

.side-nav > li > a {
    color: #333 !important;
    transition: background-color 0.3s ease-in-out !important;
}

.side-nav > li > a:hover,
.side-nav > li > a:focus {
    outline: none !important;
    color: #6c1e1e !important;
    background-color: #ded1d1 !important;
}

.side-nav > li > a.active {
    outline: none !important;
    color: #6c1e1e !important;
    background-color: rgba(222, 209, 209, 0.43) ;
}


.page_header {
    display: flex;
    justify-content: end;
    /*position: relative;*/
    width: 100%;
    margin-bottom: 0;
    /*height: 30px;*/
}

.page_header .page_title {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    color: rgb(128, 128, 128);
    top: 20px;
    left: 245px;
    /*color: rgba(120, 30, 30, 0.84);*/
    /*color: #888;*/
    /*top: -8px;*/
    /*left: 0;*/
    /*transform: translateY(-75px);*/
    z-index: 400;
    font-family: "Poppins", cursive;
    user-select: none;
    }

.logoutBtn {
    padding: 0 10px 3px 10px;
}

.logoutBtn button {
    font-size: 17px;
    border: 0;
    width: 100%;
    transition: background-color 0.3s ease-in-out !important;
}

.logoutBtn button:hover {
    color: #6c1e1e !important;
    background-color: #ded1d1 !important;
}

/*
* Made by Erik Terwan
* 24th of November 2015
* MIT License
*
*
* If you are thinking of using this in
* production co
/** {*/
/*    scroll-behavior: smooth;*/
/*}*/
/*de, beware of the browser*/
/** prefixes.*/
/**!*/


/* Menu code starts here */

/*#menuToggle*/
/*{*/
/*    !*display: block;*!*/
/*    !* You can also use relative/absolute here if you want to stay on the top *!*/
/*    position: absolute;*/
/*    top: 20px;*/
/*    right:5px;*/

/*    z-index: 2;*/

/*    -webkit-user-select: none;*/
/*    user-select: none;*/

/*}*/

/*#menuToggle a*/
/*{*/
/*    text-decoration: none;*/
/*    color: #232323;*/

/*    transition: color 0.3s ease;*/
/*}*/

/*#menuToggle a:hover*/
/*{*/
/*    color: tomato;*/
/*}*/

#side-nav-menu {
    width: 225px !important;
    background-color: #e5e5e5 !important;
    

}
#menuCheckbox {
    display: none
}



@media (max-width: 992px) {

    #userActionMenu {
        position: absolute;
        right: 70px;
    }

    #menuToggle
    {
        display: block;
        /* You can also use relative/absolute here if you want to stay on the top */
        position: absolute;
        top: 30px;
        right:20px;

        z-index:3000;


        -webkit-user-select: none;
        user-select: none;

    }

    #side-nav-menu {
        width: 225px !important;  
        background-color: #e5e5e5 !important;
        position: fixed;
        top: 0;
        right: 0;
        float: right;
        height: 100vh;
        overflow-y: auto;
        flex-wrap: wrap;

      
        padding: 1.35rem 0rem 0rem 0rem;
        scrollbar-width: thin;
        scrollbar-color: #999 transparent;
        transform: translateX(100%);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    }
    #side-nav-menu::-webkit-scrollbar-thumb {
        width: 5px;
        background: transparent; /* make scrollbar transparent */
    }

    #menuCheckbox {
        width: 40px;
        height: 32px;
        position: fixed;
        top: 30px;
        right: -20px;
        z-index:3000;
    }
    #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        position: fixed;
        top: 25px;
        right: 16px;
        cursor: pointer;

        opacity: 0;
        z-index: 200;

        -webkit-touch-callout: none;
    }


    #menuToggle span
    {
        display: block;

        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: #cdcdcd;
        border-radius: 3px;

        z-index: 5;
        user-select: none;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }


    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }


    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }


    #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }


    #menuToggle input:checked ~ #side-nav-menu
    {
        transform: none;
    }


}

@media (max-width: 768px) {
    #side-nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        float: right;
        height: 100vh;
        overflow-y: auto;
        flex-wrap: wrap;

        width: 100%;
        padding: 1.2rem 0rem 0rem 1rem;
        scrollbar-width: thin;
        scrollbar-color: #999 transparent;
        transform: translateX(100%);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

    }

    #side-nav-menu  > .navbar-nav>li>a {
        padding: 10px 0 10px 15px !important;
        width: 225px;

    }





}

body {
    padding: 0;
    margin: 0;
    background-color: #ececec !important;
    overflow-x: hidden;
    position: relative
}

#pageAlertMessages{
    position: absolute;
  
    bottom: 1rem;
   padding: 2rem;
    right: 0;
    z-index: 10000;
    user-select: none;
    pointer-events: none;
    /*background-color: rgba(0,0,0,0.5);*/
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    
}

#pageAlertMessages > div.show{
   opacity: 1;
    transform: translateY(0);
    transition: all .2s ease-in-out;
    
}
#pageAlertMessages > div{
    opacity: 0;
    transform: translateY(50%);
    transition: all 1s ease-in-out;
}


#fullPageWrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
}

#headerMenuWrapper {
    width: 100%;
    gap: 30px;
    height: 79px;
    background-color: #333;
    /*#454545 !important*/
    color: #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 1rem 1rem;
}

#cavendersMainLogo {
    background: url('../images/logo_white.png') no-repeat center center / cover;
    min-width: 210px;
    height: 100%;
}

#mainPageWrapper {
    flex-grow: 1;
    display: flex;
    width: 100%;
}

#mainContentWrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 225);
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

#pageContentWrapper {
    background-color: #f5f5f5;
    padding: 1rem;
    flex-grow: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#pageFooter {
    flex-grow: 0;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    color: #333;
}

#pageFooter a{
    color: #8c2a2a;
}