/* Global */
body{
	background-color: #F0F0F0;
}

body .page{
	margin-bottom: 46px;
}

body p{
	margin-bottom: 0px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #D4D4D4 !important;
}

a {
	color: #4A4A4A;
	cursor: pointer;
}

hr{
	border-top: 1px solid #979797;
}

a:hover {
	text-decoration: none;
}

.notification-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	position: fixed;
	margin-left: auto;
	top: 70px;
	right: 0;
	z-index: 100;
	transition: all .8s ease;
}

.toast{
	background-color: #393838;
	width: fit-content;
	padding: 25px;
	color: #FFFFFF;
	font-size: 14px;
	border-radius: 3px;
	line-height: 19px;
	font-weight: 600;
	transform: translateX(100%);
	transition: all .5s ease;
}

.toast.show{
	transform: translateX(0);
}

.toast i{
	font-size: 16px;
	line-height: 16px;
	color: #18AD11;
	margin-right: 9px;
}

.alert{
    margin-bottom: 0;
	border-radius: 2px;
}

.page:not(.with-sidebar) .container-fluid{
	max-width: 100%;
}

.page:not(.with-sidebar) .container-fluid .alert{
	margin-top: 20px;
}

#loader{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 1;
	transition: all .5s ease;
}

#loader:not(.show){
	z-index: -999;
	opacity: 0;
}

#loader img{
	width: 50px;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}

#template-notification{
	top: 12px;
	width: 100%;
	z-index: 10;
	background-color: transparent;
}

#template-notification .alert{
	text-align: center;
	font-size: 14px;
	line-height: 19px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 70px;
	margin-right: 70px;
	transform: translateY(12px);
}

#template-notification .alert strong{
	margin-left: 8px;
}

#template-notification .close{
	font-size: 14px;
	color: #18AD11;
}

.alert-success{
	color: #18AD11;
	background-color: #F3FFEC;
	border-color: #11AB0A;
}

.alert-danger{
	color: #D13737;
	background-color: #FCEFEF;
	border-color: #F6D7D7 ;
}

textarea {
	resize: none;
}

label {
	margin-bottom: 0;
}

.section-title{
	color: #2C3B40;
	font-size: 30px;
	line-height: 36px;
}

.section-title i{
	font-size: 30px;
    margin-right: 10px;
    position: relative;
    top: 1px;
}

.section-block{
	background-color: #fff;
	padding-top: 35px;
	padding-left: 35px;
	padding-right: 35px;
	padding-bottom: 31px;
}

.section-block .sub-title{
	color: #939798;
	font-size: 14px;
	line-height: 17px;
	margin-top: 4px;
}

.section-block label{
	font-size: 14px;
	color: #222B45;
	margin-bottom: 5px;
}

.form-check{
	padding-left: 0px;
}

.form-check label::after, .form-check label::before, .form-check::before, .form-check::after{
	box-sizing: initial;
}

.form-control:focus {
	box-shadow: none !important;
}

main{
	position: relative;
	min-height: calc(100vh - 65px - 65px);
}

main.product_list,
main.cart{
	background-color: #ffffff;
}

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

h1{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

h2{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

h3{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

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

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

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

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

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

.color-red{
	color: #D72727;
}

.color-blue{
	color: #0094DB;
}

.color-green{
	color: #1BCBAD;
}

.color-grey{
	color: #939798;
}

.with-errors{
    font-size: 12px;
    color: #e26262;
}

:focus {
	outline: none;
}

button:active:disabled {
	border-style: none;
}

.button{
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 29px;
	padding-right: 29px;
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	border: 0;
	border-radius: 2px;
}

button:disabled,
button[disabled]{
	background-color: #ECECEC !important;
	border-color: #ECECEC !important;
}

button:focus{
	outline: 0;
}

.button.blue{
	background-color: #0E669D;
	color: #FFFFFF;
}

.button.primary{
	background-color: #407DFC;
	border-color: #407DFC;
	color: #FFFFFF;
}

.button.primary:hover{
	background-color: #2E60D8;
	border-color: #2E60D8;
}

.button.success{
	background-color: #00AA8D;
	color: #FFFFFF;
}

.button.danger{
	background-color: #FFFFFF;
	color: #D13737;
	border: 1px solid #D13737;
}

.button.info{
	border: 1px solid #EBEBEB;
	background-color: #F9F9F9;
}

.button.disable, .button.disabled{
	background-color: #E5EAE9 !important;
	border-color: #E5EAE9;
}

input[type="submit"]{
	padding: .375rem 80px !important;
}

.form-group{
	margin-bottom: 0px;
	position: relative;
}

.page .bloc-header{
	border: 1px solid #E1E1E1;
	border-radius: 2px;
	padding-left: 33px;
	padding-right: 33px;
	padding-bottom: 28px;
	padding-top: 20px;
	background-color: #fff;
}

.page .bloc-header button{
    margin-top: 25px;
    padding-left: 35px;
    padding-right: 35px;
}

.page .bloc-header .icon i{
	margin-bottom: 10px;
	font-size: 15px;
}

.page .bloc-header .title{
	color: #4A4A4A;
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	text-align: left;
}

.page .bloc-header .subtitle{
	color: #4A4A4A;
	font-size: 12px;
	line-height: 14px;
	text-align: left;
}

.page .bloc-body{
	margin-top: 50px;
}

.page .bloc-body .title{
	color: #4A4A4A;
	font-size: 30px;
	font-weight: bold;
	line-height: 35px;
	margin-bottom: 7px;
}

.page .bloc-body .subtitle{
	color: #9B9B9B;
	font-size: 13px;
	line-height: 15px;
	margin-bottom: 26px;
}

table{
	border: 1px solid #EBEBEB;
	border-radius: 3px;
	background-color: #FFFFFF;
}

table th{
	border-radius: 3px;
}

table .dropdown-menu{
	padding-top: 15px;
	padding-bottom: 0;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);
	min-width: 100px;
}

table .dropdown-menu .dropdown-item{
	color: #000000;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	padding: 0 15px 12px 15px;
}

.dropdown-menu .dropdown-item.delete{
	color: #FF2219;
}


table .dropdown-menu .dropdown-item:hover{
	background-color: transparent;
}

table .dropdown-divider{
	margin: 0 0 12px 0;
}

table a:hover{
	color: #1BCBAD;
	text-decoration: underline;
}

table th{
	color: #2C3B40;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 14px;
	padding: 20px 30px !important;
    background-color: #ffffff;
    border-top: 0px !important;
    border-bottom: 0px !important;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd{
	background-color: #F5F5F5;
}

table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
	background-color: #F5F5F5;
}

table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
	background-color: #ffffff;
}

table.dataTable.hover tbody tr:not(.odd):hover, table.dataTable.display tbody tr:not(.odd):hover{
	background-color: #ffffff !important;
}

table td{
	vertical-align: middle !important;
	color: #2C3B40;
	font-size: 14px;
    line-height: 17px;
	padding: 15px 30px !important;
	word-break: break-word;
}

table .data-phone{
    min-width: 100px;
}

table .data-cmt{
	min-width: 130px;
}

table.dataTable.no-footer{
	border-bottom: 1px solid #E1E1E1;
}

table .dataTables_empty{
	background-color: #ffffff;
    font-size: 14px;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{
    top: 0px;
    left: 6px;
    bottom: 0px;
    margin: auto;
    height: 12px;
    width: 12px;
    line-height: 13px;
    border-radius: 0px;
}

.datepicker table th{
	color: initial;
	font-size: initial;
	font-weight: initial;
	line-height: initial;
	padding: 5px !important;
	background-color: initial;
	border-top: initial;
	border-bottom: initial;
}

.datepicker table tr{
	background-color: initial;
}

.datepicker table td{
	vertical-align: initial;
	color: initial;
	font-size: initial;
	line-height: initial;
	padding: 5px !important;
	word-break: initial;
}

.timepicker table td{
	padding: 0 !important;
}

.timepicker table span{
	padding: 0 !important;
}

.dataTables_length{
    font-size: 12px;
    position: relative;
    top: 14px;
    left: 1px;
}

.dataTables_length select{
	background-color: #F9F9F9;
	border-radius: 1px;
	border: 1px solid #979797;
}

.dataTables_filter input{
    padding: 6px;
    font-size: 14px;
    border: 1px solid #fdf4f4;
}

.dataTables_info{
	font-size: 13px;
}

.dataTables_paginate{
    position: relative;
}

.modal-content{
	border: 1px solid #EBEBEB;
	border-radius: 2px;
}

.select2-dropdown{
	border-radius: 2px;
	border: 1px solid #E2E5E6;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 6px;
	right: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #D8D8D8 transparent transparent transparent;
	border-width: 7px 6px 0 6px;
}

.select2-container .select2-selection--single .select2-selection__rendered{
	padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
	display: flex;
	align-items: center;
	height: 25px;
	color: #939798;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #F9F9F9;
	padding: 4px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	color: #C2C6C7;
	font-weight: normal;
	margin-right: 8px;
}

.select2-container--default .select2-search--inline .select2-search__field{
	border: 0 !important;
	padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
	color: #d7d4d7;
}

.select2-container--default .select2-selection--single
{
	height: 100%;
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 4px 20px;
}

.select2-container--default .select2-selection--multiple{
	height: 100%;
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6 !important;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 4px;
}

.paginate_button{
	font-size: 11px;
	margin-top: 5px;
}

.dropdown-toggle::after{
	display: none;
}

.btn-import{
	font-size: 12px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #EFEFEF;
	border-radius: 2px;
	border: 1px solid #CCCCCC;
	margin-left: 15px;
}

nav{
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 70px;
	border: 1px solid #ECECEC;
}

nav .logo{
	height: 38px;
	width: auto;
	max-width: 100%;
}

.navbar-light .user{
    position: relative;
}

.navbar-light .user i{
	color: #5AC1D0;
    font-size: 34px;
    position: relative;
    top: 1px;
}

.navbar-light .user .dropdown-menu{
	position: absolute;
	right: 0px;
	left: initial;
}

.navbar-light .user .dropdown-menu a{
    font-size: 14px;
    padding: 10px;
    color: black;
}

.navbar .title-user{
    margin-right: 10px;
    font-size: 13px;

    font-weight: 500;
    position: relative;
    top: 1px;
}

.link-back{
	color: #5AC1D0;
	font-size: 14px;
}

input.readonly {
	background-color: #e0dede !important;
}

textarea.readonly {
	background-color: #e0dede !important;
}

/* LOGIN */
.main-content .login-container{
	position: relative;
}

.login-container .panel{
	position: relative;
	max-width: 540px;
	margin: auto;
	margin-top: 80px;
	padding: 44px 64px;
	background-color: #fff;
	border-radius: 2px;
	border: 1px solid #EBEBEB;
}

.login-container.reset .panel{
	max-width: 400px;
}

.login-container .login-form input{
	margin-bottom: 0px !important;
}

.login-container .panel .panel-heading{
	margin-bottom: 40px;
	text-align: center;
}

.login-container .panel .panel-heading .title{
	color: #2B2B2B;
	font-size: 24px;
	font-weight: 500;
	line-height: 28px;
}

.login-container .update-password{
	color: #2B2B2B;
	font-size: 12px;
	line-height: 14px;
	text-decoration: underline;
}

.login-container .panel-heading .logo{
	width: 154px;
	object-fit: cover;
}

.login-container .panel-body label{
	color: #2B2B2B;
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 8px;
}

.login-container .panel-body .form-control{
	min-height: 54px;
	background-color: #FFFFFF;
	border-radius: 2px;
	border: 0.5px solid #CCCCCC;
	color: #2B2B2B;
	font-size: 14px;
	width: 100%;
	height: 46px;
	margin-bottom: 17px;
	line-height: 40px;
	padding: 17px;
}

.login-container .panel-body .bloc-password .form-control{
	margin-bottom: 0px;
}

.login-container .panel-body .form-control::placeholder{
	color: #D4D4D4;
	font-size: 14px;
	padding-left: 0px;
}

.login-container .panel-body .link-forget-password{
	color: #2B2B2B;
	font-size: 12px;
	line-height: 14px;
	margin-bottom: 29px;
	text-decoration: underline;
}

.login-container .panel-body .login-submit .btn{
	width: 100%;
}

.login-container .panel-body .button{
	margin-top: 23px;
	min-height: 44px;
	width: 100%;
	padding: 12px 45px;
}

.login-container .separate{
	border-top: 1px solid #E2E5E6;
	margin-top: 40px;
	width: 100%;
}

.login-container .update-password{
	margin-top: 40px;
}

.login-container .update-password a{
	color: #939798;
	font-size: 12px;
	line-height: 14px;
}

#userLogin .update-password {
	color: #2B2B2B;
	font-size: 12px;
	line-height: 14px;
	text-decoration: underline;
}

/* container-no-app */
.container-no-app .picture img{
	width: 175px;
	height: auto;
}

.container-no-app .title{
	color: #2C3D40;
	font-size: 24px;
	line-height: 28px;
	text-align: center;
}

.container-no-app .description{
	margin-top: 30px;
	color: #2C3D40;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 30px;
	text-align: left;
}

.container-no-app .panel{
	margin-top: 40px;
	padding-top: 60px;
	padding-bottom: 60px;
}

.container-no-app input{
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
}

.container-no-app .return{
	max-width: 540px;
	margin: auto;
	text-align: left;
	margin-bottom: 100px;
	color: #2C3D40;
	font-size: 12px;
	line-height: 14px;
	margin-top: 40px;
}

.container-no-app .return i{
	margin-right: 7px;
    font-weight: 400;
}

.container-no-app .panel-body .form-control{
	margin-bottom: 0px;
}

.container-no-app .submit .button{
	margin-top: 19px;
	width: 100%;
}

.container-no-app.confirm-resetting .panel-heading{
	margin-bottom: 0px !important;
}

.container-no-app.confirm-resetting .description{
	margin-bottom: 0px !important;
}

/* Sidebar */
.sidebar{
	height: 100%;
	width: 235px;
	background-color: #0382D2;
	float: left;
	position: fixed;
}

.sidebar .logo img{
    width: 128px;
    margin-left: 32px;
}

.sidebar .account{
    background-color: #1A92DD;
    padding-top: 19px;
    padding-bottom: 17px;
    padding-right: 32px;
    margin-top: 22px;
    margin-bottom: 50px;
}

.sidebar .account .picto{
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 300;
    display: inline-block;
    margin-left: 32px;
	vertical-align: top;
	margin-top: 3px;
    margin-right: 5px;
    position: absolute;
}

.sidebar .account .picto i{
	vertical-align: top;
}

.sidebar .account .name-account{
	display: inline-block;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 17px;
    padding-left: 70px;
    word-break: break-word;
}

.sidebar .account .name-account .role{
	color: #81C3EC;
	font-size: 14px;
	line-height: 17px;
}

.sidebar .links .link{
	color: #FFFFFF;
	font-size: 14px;
	line-height: 17px;
	padding-left: 32px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sidebar .links .link.active{
	background-color: #1A92DD;
    border-left: 4px solid #fff;
	padding-left: 28px;
}

.sidebar .links .link.active a{
	font-weight: 600;
}

.sidebar .links .link a{
	color: #FFFFFF;
	font-size: 14px;
	line-height: 17px;
    padding-left: 35px;
    position: relative;
    top: 1px;
}

.sidebar .links .link i{
	font-size: 17px;
	margin-right: 12px;
	position: absolute;
}

.sidebar .logout{
    position: absolute;
    bottom: 27px;
    margin: auto;
    left: 0px;
    right: 0px;
    text-align: center;
}

.sidebar .logout .button{
    right: 2px;
    position: relative;
}

.page.with-sidebar{
	padding-left: 330px;
	padding-right: 138px;
	padding-top: 46px;
}

.dataTables_wrapper .dataTables_length{
	float: right;
}

.dataTables_length {
	left: 1px;
}

.dataTables_wrapper .dataTables_filter {
	float: left;
	text-align: left;
}

.dataTables_wrapper .dataTables_filter input {
	font-family: 'Rubik', sans-serif;
	color: #2C3B40;
	font-size: 14px;
	line-height: 17px;
	width: 400px;
	margin-left: 0;
	margin-right: 0.5em;
	margin-bottom: 15px;
	padding: 16px 40px;
	border: 1px solid #D7D7D7;
	border-radius: 3px;
	background-color: #FFFFFF;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
	color: #E2E5E6;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 19px;
}

.dataTables_wrapper .dataTables_filter:after{
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	content: "\f002";
	display: inline-block;
	font-size: 14px;
	line-height: 15px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top: 19px;
	left: 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
	border: 1px solid #979797;
	border-radius: 1px;
	background: #E2E5E6;
}

.bread-crumb{
	margin-bottom: 35px;
}

.bread-crumb span{
	color: #2C3D40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	line-height: 17px;
}

.bread-crumb span.active{
	font-weight: 500;
}

/* Account */
#account .section-block{
	padding-right: 127px;
}

#account .submit.button{
	width: 100%;
}

#account .cancel.button{
	width: 100%;
	display: none;
}

#account .cancel.button.active{
	display: block;
}

#account .info-role{
	font-size: 14px;
	font-weight: 400;
}

#account .info-name{
	font-size: 14px;
	font-weight: 600;
}

/* CMT */
#cmt-list .header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 42px;
}

#cmt-list .header-title{
	display: flex;
	align-items: center;
}

#cmt-list .header-title h1{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 0;
}

#cmt-list .header-title i{
	font-size: 30px;
	line-height: 33px;
	margin-right: 12px;
}

#cmt-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#cmt-list .edit-btn:not(.show){
	color: #2C3D40;
}

#cmt-list a:hover{
	text-decoration: underline;
}

/*** Secretary ***/
#secretary-list .header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 42px;
}

#secretary-list .header-title{
	display: flex;
	align-items: center;
}

#secretary-list .header-title h1{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 0;
}

#secretary-list .header-title i{
	font-size: 30px;
	line-height: 33px;
	margin-right: 12px;
}

#secretary-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#secretary-list .edit-btn:not(.show){
	color: #2C3D40;
}

#secretary-list a:hover{
	text-decoration: underline;
}

/* DOCTOR */
#doctor-list .header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 42px;
}

#doctor-list .header-title{
	display: flex;
	align-items: center;
}

#doctor-list .header-title h1{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 0;
}

#doctor-list .header-title i{
	font-size: 30px;
	line-height: 33px;
	margin-right: 12px;
}

#doctor-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#doctor-list a:hover{
	text-decoration: underline;
}

/* PAtient */
#patient-list .header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 42px;
}

#patient-list .header-title{
	display: flex;
	align-items: center;
}

#patient-list .header-title h1{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 0;
}

#patient-list .header-title i{
	font-size: 30px;
	line-height: 33px;
	margin-right: 12px;
}

#patient-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#patient-list a:hover{
	text-decoration: underline;
}

#patient-list #patient-table tr td:nth-child(1){
	min-width: 170px;
}

#patient-list #patient-table tr td:nth-child(3){
	min-width: 130px;
}

#patient-list #patient-table tr td:nth-child(4){
	min-width: 130px;
}

#patient-list #patient-table tr td:nth-child(6){
	min-width: 130px;
}

/*** Update User ***/
#update-user .form-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 475px;
	margin-bottom: 10px;
}

#update-user .form-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#update-user .form-content{
	width: 475px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px;
}

#update-user label{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#update-user input{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 20px;
}

#update-user .form-content button{
	width: 100%;
	margin-top: 20px;
}

/*** Update doctor ***/
#update-doctor .form-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 475px;
	margin-bottom: 10px;
}

#update-doctor .form-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#update-doctor .form-content{
	width: 475px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px;
}

#update-doctor label{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#update-doctor input{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 20px;
}

#update-doctor .form-content button{
	width: 100%;
	margin-top: 20px;
}

/*** View User ***/
#view-user span{
	word-break: break-all;
}

#view-user .button-block i{
	margin-right: 8px;
}

#view-user .box-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 522px;
	margin-bottom: 10px;
}

#view-user .box-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#view-user .box-content{
	width: 522px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px 20px 45px;
}

#view-user .box-content h2{
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 20px;
}

#view-user .box-content .data-section{
	display: flex;
	margin-bottom: 20px;
}

#view-user .box-content .labels{
	display: flex;
	flex-direction: column;
	margin-right: 30px;
	color: #2C3B40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	width: 140px;
}

#view-user .box-content .labels span{
	margin-bottom: 6px;
}

#view-user .box-content .data{
	display: flex;
	flex-direction: column;
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

#view-user .box-content .data span{
	margin-bottom: 6px;
}

#view-user .box-content .separator{
	height: 1px;
	width: 100%;
	background-color: #E2E5E6;
	margin-bottom: 26px;
}

#view-user .box-content button{
	width: 100%;
	margin-top: 40px;
}

/*** View Doctor ***/
#view-doctor span{
	word-break: break-all;
}

#view-doctor .button-block i{
	margin-right: 8px;
}

#view-doctor .box-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 522px;
	margin-bottom: 10px;
}

#view-doctor .box-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#view-doctor .box-content{
	width: 522px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px 20px 45px;
}

#view-doctor .box-content h2{
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 20px;
}

#view-doctor .box-content .data-section{
	display: flex;
	margin-bottom: 20px;
}

#view-doctor .box-content .labels{
	display: flex;
	flex-direction: column;
	margin-right: 30px;
	color: #2C3B40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	width: 140px;
}

#view-doctor .box-content .labels span{
	margin-bottom: 6px;
}

#view-doctor .box-content .data{
	display: flex;
	flex-direction: column;
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

#view-doctor .box-content .data span{
	margin-bottom: 6px;
}

#view-doctor .box-content .separator{
	height: 1px;
	width: 100%;
	background-color: #E2E5E6;
	margin-bottom: 26px;
}

#view-doctor .box-content button{
	width: 100%;
	margin-top: 40px;
}

/*** View Patient ***/
#view-patient span{
	word-break: break-all;
}

#view-patient .button-block i{
	margin-right: 8px;
}

#view-patient .box-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 812px;
	margin-bottom: 10px;
}

#view-patient .box-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#view-patient .box-content{
	width: 812px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px 20px 45px;
	position: relative;
}

#view-patient .box-content h2{
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 20px;
}

#view-patient .box-content .data-section{
	display: flex;
	margin-bottom: 20px;
}

#view-patient .box-content .labels{
	display: flex;
	flex-direction: column;
	margin-right: 30px;
	color: #2C3B40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	width: 140px;
}

#view-patient .box-content .labels span{
	margin-bottom: 6px;
}

#view-patient .box-content .data{
	position: relative;
	display: flex;
	flex-direction: column;
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	flex-grow: 1;
}

#view-patient .box-content .data span{
	margin-bottom: 6px;
}

#view-patient .box-content .separator{
	height: 1px;
	width: 100%;
	background-color: #E2E5E6;
	margin-bottom: 26px;
}

#view-patient .box-content button{
	width: 100%;
	margin-top: 40px;
}

#view-patient .status{
	position: absolute;
	right: 0px;
	top: 0px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 2px;
    margin-right: 45px;
    margin-top: 40px;
}

#view-patient .status.enabled{
	background-color: #EBF9F6;
	color: #1BC3AC;	
	font-size: 14px;	
	line-height: 17px;
}

#view-patient .status.disabled{
	background-color: #FCEFEF;
	color: #E11818;	
	font-size: 14px;	
	line-height: 17px;
}

#view-patient .date-registration{
	color: #B9BDBD;
	font-size: 12px;
	font-weight: 300;
	line-height: 14px;
	position: absolute;
	right: 0;
}

#view-patient .tag-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#view-patient .tag{
	padding: 5px 15px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	color: #939798;
	background-color: #F9F9F9;
	font-size: 14px;
	line-height: 17px;
	margin-right: 5px;
	margin-bottom: 5px;
}

#view-patient .update-patient-cmt form{
	display: flex;
	justify-content: space-between;
}

#view-patient .update-patient-cmt form .select2{
   max-width: 358px;
   width: 358px !important;
}

#view-patient .update-patient-cmt button{
	margin: 0;
}

#view-patient .update-patient-doctor form{
	display: flex;
	justify-content: space-between;
}

#view-patient .update-patient-doctor form .select2{
   max-width: 358px;
   width: 358px !important;
}

#view-patient .update-patient-doctor button{
	margin: 0;
}

.select2-selection__choice__remove{
	position: relative;
	top: 3px;
}

#view-patient .box-content .data .select2-selection__rendered{
	margin-bottom: 0;
}

#view-patient .data .enabled{
	color: #1BC3AC;
}

#view-patient .data .disabled{
	color: #E80A0A;
}

#view-patient #appointments h2{
    color: #4D4949;	
    font-size: 18px;	
    line-height: 22px;
    margin-top: 40px;
    margin-bottom: 27px;
}

#view-patient #appointments{
    width: 812px;
}

#view-patient #appointments .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#view-patient #appointments .header .button{
    margin-top: 30px;
}

#view-patient #appointments .app-header{
    padding-left: 45px;
    padding-right: 0px;
    margin-bottom: 10px;
}

#view-patient #appointments .app-header span{
    color: #2C3B40;	
    font-size: 14px;	
    line-height: 17px;
    font-weight: 500;
}

#view-patient #appointments .appointments{
  
}

#view-patient #appointments .appointment{
	background-color: #FFFFFF;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	padding-top: 15px;
	padding-bottom: 2px;
	padding-left: 45px;
	padding-right: 0px;
	margin-bottom: 6px;
}

#view-patient #appointments .appointment .type{
	color: #2C3B40;		
	font-size: 14px;	
	line-height: 17px;
	font-weight: 500;
}

#view-patient .edit-btn{
	color: #0382D2;
	font-size: 25px;
    top: -5px;
    position: relative;
}

#view-patient a:hover {
    text-decoration: underline;
}

#view-patient a:hover {
    color: #1BCBAD;
    text-decoration: underline;
}

/* View appointment */
#view-appointment span{
	word-break: break-word;
}

#view-appointment .button-block i{
	margin-right: 8px;
}

#view-appointment .box-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 822px;
	margin-bottom: 10px;
}

#view-appointment .box-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#view-appointment .box-content{
	width: 822px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px 20px 45px;
}

#view-appointment .box-content h2{
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 20px;
}

#view-appointment .box-content .data-section{
	display: flex;
	margin-bottom: 20px;
}

#view-appointment .box-content .labels{
	display: flex;
	flex-direction: column;
	margin-right: 30px;
	color: #2C3B40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	min-width: 140px;
}

#view-appointment .box-content .labels span{
	margin-bottom: 6px;
}

#view-appointment .box-content .data{
	display: flex;
	flex-direction: column;
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

#view-appointment .box-content .data span{
	margin-bottom: 6px;
}

#view-appointment .box-content .separator{
	height: 1px;
	width: 100%;
	background-color: #E2E5E6;
	margin-bottom: 26px;
}

#view-appointment .box-content button{
	width: 100%;
	margin-top: 40px;
}

/*** Sub Navbar ***/
#video-list nav,
#thematic-list nav,
#thematic-update nav,
#tag-list nav,
#tag-update nav,
#appointment-list nav
{
	margin-bottom: 46px;
}

#video-list .header,
#thematic-list .header,
#thematic-update .header,
#tag-list .header,
#tag-update .header,
#appointment-list .header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 47px;
}

#video-list .header-title,
#thematic-list .header-title,
#thematic-update .header-title,
#tag-list .header-title,
#tag-update .header-title,
#appointment-list .header-title
{
	display: flex;
	align-items: center;
}

#video-list .header h1,
#thematic-list .header h1,
#thematic-update .header h1,
#tag-list .header h1,
#tag-update .header h1,
#appointment-list .header h1
{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 0;
}

#video-list .header-title i,
#thematic-list .header-title i,
#thematic-update .header-title i,
#tag-list .header-title i,
#tag-update .header-title i,
#appointment-list .header-title i
{
	font-size: 30px;
	margin-right: 12px;
}

#video-list .nav-tabs,
#thematic-list .nav-tabs,
#thematic-update .nav-tabs,
#tag-list .nav-tabs,
#tag-update .nav-tabs,
#appointment-list .nav-tabs
{
	border-bottom: 1px solid #E2E5E6;
}

#video-list .nav-link,
#thematic-list .nav-link,
#thematic-update .nav-link,
#tag-list .nav-link,
#tag-update .nav-link,
#appointment-list .nav-link
{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	line-height: 19px;
	border: 0;
}

#video-list .nav-link.active,
#thematic-list .nav-link.active,
#thematic-update .nav-link.active,
#tag-list .nav-link.active,
#tag-update .nav-link.active,
#appointment-list .nav-link.active
{
	color: #0382D2;
	font-weight: 500;
	background-color: transparent;
	border: 0;
	border-bottom: 3px solid #0382D2;
}

/*** Video List ***/
#video-list table img{
	height: 60px;
	width: 100px;
}

#video-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#video-list .edit-btn:not(.show){
	color: #2C3D40;
}

/*** Thematic + Tag List ***/
#thematic-list .form-content, #tag-list .form-content{
	width: 100%;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 25px;
	margin-top: 58px;
}

#thematic-list .form-title, #tag-list .form-title{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
	margin-bottom: 25px;
}

#thematic-list .form-content label, #tag-list .form-content label{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#thematic-list .form-content input, #tag-list .form-content input{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 14px;
}

#thematic-list .edit-btn, #tag-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#thematic-list .edit-btn:not(.show), #tag-list .edit-btn:not(.show){
	color: #2C3D40;
}

#thematic-list .delete-btn, #tag-list .delete-btn{
	color: #D13737;
	font-size: 14px;
	margin-left: 18px;
}

#thematic-list .form-content button, #tag-list .form-content button{
	width: 100%;
}

/*** Thematic + Tag Update ***/
#thematic-update h2,
#tag-update h2
{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 25px;
}

#thematic-update .form-content,
#tag-update .form-content
{
	width: 290px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 25px;
}

#thematic-update label,
#tag-update label
{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#thematic-update input,
#tag-update input
{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 20px;
}

#thematic-update .form-content button,
#tag-update .form-content button
{
	width: 100%;
	margin-top: 20px;
}

/*** Update Video ***/
#update-video .form-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 475px;
	margin-bottom: 10px;
}

#update-video .form-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#update-video .form-content{
	width: 475px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px;
}

#update-video label{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#update-video input, #update-video textarea{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
}

#update-video .form-group{
	margin-bottom: 20px;
}

#update-video input:read-only{
	color: #295FE1;
	padding-right: 30px;
}

#update-video .url{
	position: relative;
}

#update-video .delete-url{
	color: #C2C6C7;
	display: inline-block;
	font-size: 10px;
	line-height: 15px;
	position: absolute;
	top: 13px;
	right: 15px;
	cursor: pointer;
}

#update-video textarea{
	min-height: 135px;
	padding-bottom: 0;
}

#update-video .form-content button{
	width: 100%;
	margin-top: 20px;
}

/*** View Video ***/
#view-video span{
	word-break: break-all;
}

#view-video .button-block i{
	margin-right: 8px;
}

#view-video .box-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

#view-video .box-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#view-video .box-content{
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px 20px 45px;
}

#view-video .info-row{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

#view-video .info-col{
	width: 48%;
}

#view-video .info-col.left{
	padding-right: 40px;
}

#view-video .info-col.right{
	padding-left: 40px;
}

#view-video .box-content h2{
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 20px;
}

#view-video .box-content .data-section:not(:last-child){
	margin-bottom: 40px;
}

#view-video .box-content .label{
	color: #2C3B40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 12px;
}

#view-video .box-content .data{
	color: #2C3B40;
	font-family: "Rubik", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
}

#view-video .box-content a .data{
	color: #295FE1;
}

#view-video .box-content img{
	width: 300px;
	height: 170px;
	object-fit: cover;
}

#view-video .box-content .separator{
	max-width: 1%;
	height: auto;
	width: 1px;
	background-color: #E2E5E6;
}

#view-video .box-content button{
	width: 100%;
	margin-top: 40px;
}

#view-video .tag-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#view-video .tag{
	padding: 5px 15px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	color: #939798;
	background-color: #F9F9F9;
	font-size: 14px;
	line-height: 17px;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* List Appointment */
#appointment-list .edit-btn{
	color: #0382D2;
	font-size: 25px;
}

#appointment-list #appointment-table tr td:nth-child(1){
	min-width: 140px;
}

#appointment-list #appointment-table tr td:nth-child(2){
	min-width: 140px;
}

#appointment-list #appointment-table tr td:nth-child(3){
	min-width: 140px;
}

#appointment-list #appointment-table tr td:nth-child(4){
	min-width: 80px;
}

.modal-content h5{
	color: #2C3D40;
	font-family: "Rubik", sans-serif;
	font-size: 18px;
	line-height: 22px;
}

.modal-content .close{
	color: #2C3D40;
	font-size: 14px;
	line-height: 15px;
}

.modal-content textarea{
	height: 150px;
	margin-bottom: 30px;
	padding: 12px;
	color: #939798;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
}

.modal-content button[type=submit]{
	width: 380px;
	margin-bottom: 23px;
}

.modal-content p{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	padding: 0 15%;
}

/*** Update Appointment ***/
#update-appointment .form-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 475px;
	margin-bottom: 10px;
}

#update-appointment .form-header h1{
	color: #4D4949;
	font-family: "Rubik", sans-serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 25px;
	margin-bottom: 0;
}

#update-appointment .form-content{
	width: 475px;
	border: 1px solid #EBEBEB;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 40px 45px;
}

#update-appointment .form-group{
	margin-bottom: 20px;
}

#update-appointment label{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 8px;
}

#update-appointment input{
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 20px;
}

#update-appointment textarea{
	min-height: 130px;
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
	border: 1px solid #E2E5E6;
	border-radius: 2px;
	background-color: #FFFFFF;
	padding: 15px 20px;
}

#update-appointment .form-content button{
	width: 100%;
	margin-top: 20px;
}

#update-appointment #use-address{
	margin-top: -10px;
	display: flex;
	align-items: center;
	color: #2C3D40;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	line-height: 17px;
}

#update-appointment #use-address input[type=checkbox]{
	margin-right: 10px;
	margin-bottom: 0;
}

/* New Project */

.cart-btn{
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid #C5C5C5;
	border-radius: 2px;
	padding: 6px 20px;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	transition: all .2s ease;
}

.cart-btn:hover{
	color: #407DFC;
	border: 1px solid #407DFC;
}

.cart-btn #cart-badge{
	position: absolute;
	top: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	left: -12px;
	background-color: #407DFC;
	border-radius: 100%;
	padding: 9px;
	width: 24px;
	color: #ffffff;
	height: 24px;
	font-size: 11px;
	font-weight: 600;
	line-height: 15px;
}

.cart-btn.active{
	color: #407DFC;
	border: 1px solid #407DFC;
	font-weight: 600;
}

.cart-btn i{
	font-size: 18px;
	margin-right: 6px;
}

#product-list{
	background-color: #ffffff;
}

#product-list h1{
	color: #192426;
	font-family: "Open Sans", sans-serif;
	font-size: 36px;
	line-height: 42px;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 50px;
}

#product-list .table-content{
	padding: 60px 70px 70px 70px;
	background-color: #F0F0F0;
	border: 1px solid #F0F0F0;
}

#product-list .table-content .quantity{
	padding: 6px 12px;
	border-radius: 2px;
	border: 1px solid #ECECEC;
	max-width: 85px;
	margin-right: 8px;
}

#product-list .table-content .add-cart{
	border-radius: 2px;
	background-color: #407DFC;
	border: 1px solid;
	border-color: #407DFC;
	padding: 8px;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	transition: all .5s ease;
	cursor: pointer;
}

#product-list .table-content .add-cart:hover{
	background-color: #2E60D8;
	border-color: #2E60D8;
}

#product-list .green{
	color: #11AB0A;
}

#product-list .red{
	color: #E80A0A;
}

#product-list .quantity-block{
	display: flex;
	align-items: center;
}

.empty-card-message{
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 58px;
	padding: 36px 98px;
	border: 1px solid #EBEBEB;
	border-radius: 3px;
	background-color: #FFFFFF;
}

.empty-card-message h2{
	color: #192426;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 17px;
}

.empty-card-message p{
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 33px;
}

.empty-card-message .cta{
	display: inline-block;
	padding: 12px 35px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	background-color: #407DFC;
	border-color: #407DFC;
	border-radius: 3px;
}

.empty-card-message .cta:hover{
	background-color: #2E60D8;
	border-color: #2E60D8;
}

#cart{
	padding-top: 40px;
}

#cart .back{
	margin-left: 70px;
	color: #0C0C0C;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}

#cart .back.empty{
	display: none;
}

#cart .back i{
	margin-right: 5px;
}

#cart h1{
	color: #192426;
	font-family: "Open Sans", sans-serif;
	font-size: 36px;
	line-height: 42px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 50px;
}

#cart h2{
	color: #192426;
	font-size: 24px;
	line-height: 33px;
	margin-bottom: 17px;
}

#cart h3{
	color: #192426;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 17px;
}

#cart .cart-content{
	display: flex;
	justify-content: center;
	padding: 60px 70px 65px 70px;
	background-color: #F0F0F0;
	border: 1px solid #F0F0F0;
}

#cart .line-form.comment .info{
	width: 100%;
}

#cart .line-form.comment textarea{
	width: 100%;
    height: 162px;
    border: 1px solid #ECECEC;
    border-radius: 2px;
    background-color: #FFFFFF;
    padding: 15px;
    font-size: 14px;
}

#cart .line-form.comment textarea:placeholder{
	color: #D9D9D9;	
	font-size: 14px;	
	line-height: 19px;
}

#cart .line-form.type .info{
	width: 100%;
}

#cart .line-form.type select{
	width: 100%;
    border: 1px solid #ECECEC;
    border-radius: 2px;
    background-color: #FFFFFF;
    padding: 15px;
    font-size: 14px;
}

#cart .line-form.type select:placeholder{
	color: #D9D9D9;	
	font-size: 14px;	
	line-height: 19px;
}

#cart .product-list{
	width: 750px;
	margin-right: 30px;
}

#cart .list-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

#cart .list-header a{
	border: 1px solid #C5C5C5;
	border-radius: 3px;
	padding: 9px 27px;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
}

#cart .product-table{
	border-radius: 3px;
	border: 1px solid #EBEBEB;
}

#cart .product-row{
	display: flex;
	align-items: baseline;
	padding: 23px 30px;
	background-color: #ffffff;
}

#cart .product-row:nth-child(odd){
	background-color: #F5F5F5;
}

#cart .line-form{
	display: flex;
	align-items: baseline;
	padding: 23px 30px;
	background-color: #ffffff;
}

#cart .info{
	width: 250px;
}

#cart .quantity{
	margin-left: 176px;
}

#cart .quantity span{
	display: block;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 13px;
}

#cart .quantity input{
	max-width: 86px;
	padding: 6px 12px;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	border: 1px solid #ECECEC;
	border-radius: 2px;
	background-color: #FFFFFF;
}

#cart .quantity .update-quantity{
	border-radius: 2px;
	background-color: #407DFC;
	border: 1px solid;
	border-color: #407DFC;
	padding: 8px;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	cursor: pointer;
}

#cart .delete{
	align-self: center;
	margin-left: auto;
	text-decoration: underline;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
}

#cart .delete i{
	margin-right: 7px;
	font-size: 14px;
	line-height: 14px;
}

#cart h4{
	color: #192426;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	margin-bottom: 14px;
}

#cart .status{
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 3px;
}

#cart .status.green{
	color: #11AB0A;
}

#cart .status.red{
	color: #E80A0A;
}

#cart .ref{
	margin-bottom: 3px;
}

#cart .ref, #cart .fournisseur{
	color: #516366;
	font-size: 14px;
	line-height: 19px;
}

#cart .send-order{
	margin-top: 63px;
	width: 360px;
	height: fit-content;
	border: 1px solid #EBEBEB;
	padding: 36px 30px;
	border-radius: 3px;
	background-color: #FFFFFF;
	position: sticky;
	top: 60px;
}

#cart .send-order p{
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 20px;
	margin-top: 10px;
}

#cart .send-order button{
	display: inline-block;
	padding: 12px 35px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	background-color: #407DFC;
	border-color: #407DFC;
	border-radius: 3px;
	width: 100%;
	transition: all .5s ease;
}

#cart .send-order a:hover{
	background-color: #2E60D8;
	border-color: #2E60D8;
}

footer{
	position: relative;
	color: #192426;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 19px;
	background-color: #FFFFFF;
	padding-top: 23px;
	padding-bottom: 23px;
	display: flex;
	align-items: center;
}

footer ul{
	display: flex;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

footer li{
	padding-left: 18px;
	padding-right: 18px;
}

footer .logout-btn{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 70px;
	display: flex;
	align-items: center;
	border: 1px solid #C5C5C5;
	border-radius: 2px;
	padding: 6px 20px;
	color: #192426;
	font-size: 14px;
	line-height: 19px;
	transition: all .5s ease;
}

footer .logout-btn:hover{
	background-color: #F5F5F5;
}

@media screen and (max-width: 1039px) {
	nav{
		padding: 16px 20px;
	}

	.notification-container{
		top: 0;
		width: 100%;
	}

	.toast{
		text-align: center;
		border-radius: 0;
		width: 100%;
		transform: translateY(-100%) translateX(0);
	}

	.toast.show{
		transform: translateY(0);
	}

	#template-notification .alert{
		text-align: left;
		margin-left: 20px;
		margin-right: 20px;
	}

	#template-notification .alert span{
		display: block;
		margin-top: 8px;
	}

	.cart-btn{
		padding: 0;
		border: none;
	}

	.cart-btn.active{
		border: none;
	}

	.cart-btn #cart-badge{
		top: 0;
		left: -28px;
	}

	.cart-btn i{
		font-size: 27px;
	}

	.cart-btn span{
		display: none;
	}

	#product-list h1{
		font-size: 25px;
		line-height: 34px;
		margin-top: 50px;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}

	#product-list .table-content{
		padding: 50px 20px 65px 20px;
	}

	.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input{
		width: 100%;
	}

	.dataTables_wrapper .dataTables_filter:after{
		top: 26px;
	}

	table th{
		color: #192426;
		font-size: 14px !important;
		line-height: 19px;
		padding: 15px !important;
	}

	table td{
		padding: 15px !important;
	}

	table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{
		width: 60%;
	}

	table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{
		content: "\f067";
		font-family: "Font Awesome 5 Pro";
		box-shadow: none;
		border: none;
		border-radius: 100%;
		background-color: #407DFC;
		font-size: 10px;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .2s ease;
		top: 50%;
		transform: translateY(-50%);
		left: 150%;
		bottom: initial;
	}

	table.dataTable.dtr-inline.collapsed>tbody>tr>td:not(:first-child), table.dataTable.dtr-inline.collapsed>tbody>tr>th:not(:first-child){
		padding-right: 35px !important;
	}

	table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{
		background-position: center right 20px;
	}

	table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{
		content: "\f068";
		color: #192426;
		background-color: #D8EAFE;
	}

	table.dataTable>tbody>tr.child ul li{
		display: flex;
		flex-direction: column;
		border: none;
	}

	table.dataTable>tbody>tr.child span.dtr-title{
		margin-bottom: 7px;
	}

	#product-list .table-content .quantity{
		padding: 13px 16px;
		max-width: 200px;
	}

	#product-list .quantity-block{
		display: flex;
		align-items: center;
		margin-top: 17px;
	}

	#product-list .table-content .add-cart{
		padding: 14px;
	}

	.empty-card-message{
		padding: 36px 30px;
	}

	#cart{
		padding-top: 25px;
	}

	#cart .back{
		margin-left: 26px;
	}

	#cart h1{
		font-size: 25px;
		line-height: 34px;
		max-width: 300px;
		margin-top: 34px;
		margin-left: auto;
		margin-right: auto;
	}

	#cart h2{
		font-size: 18px;
		line-height: 24px;
		margin-bottom: 14px;
	}

	#cart .list-header{
		flex-direction: column;
		align-items: start;
		margin-bottom: 33px;
	}

	#cart .list-header a{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#cart .cart-content{
		flex-direction: column;
		padding: 50px 20px 0 20px;
	}

	#cart .product-list{
		width: 100%;
		margin-right: 0;
		margin-bottom: 50px;
	}

	#cart .product-row{
		flex-direction: column;
	}

	#cart .info{
		width: 100%;
		margin-bottom: 30px;
	}

	#cart .quantity{
		margin-left: 0;
		margin-bottom: 24px;
	}

	#cart .quantity input{
		max-width: 200px;
		padding: 13px 16px;
	}

	#cart .quantity .update-quantity{
		padding: 14px;
	}

	#cart .delete{
		margin-left: 0;
		margin-right: auto;
	}

	#cart .send-order{
		margin-top: 0;
		padding: 20px;
		width: fit-content;
		margin-left: -20px;
		margin-right: -20px;
		position: sticky;
		top: initial;
		bottom: 0;
	}

	#cart .send-order h3{
		display: none;
	}

	#cart .send-order a{
		margin-bottom: 13px;
	}

	#cart .send-order p{
		font-size: 12px;
		line-height: 17px;
		margin-bottom: 0;
	}

	#cart .col-order{
		order: -1;
	}

	footer ul{
		margin-top: 60px;
		flex-direction: column;
		align-items: center;
	}

	footer ul li{
		padding-top: 3px;
		padding-bottom: 3px;
	}

	footer .logout-btn{
		top: 27px;
		width: 338px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}

}