@import url('/fonts/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,600;1,300;1,600&display=swap');


/**
 * Legacy color codes from Colors.scss 
 */
:root {
 --fox-orange: #DE7E68;
 --fox-light-orange: #E7A292;
 --fox-dark-orange: #f04e26; 

 --fox-blue: #3788D1;
 --fox-light-blue: #87b7e3;
 --fox-dark-blue: #236097;

 --fox-gray: #6b7174;
 --fox-medium-gray: #B7C0C5;
 --fox-light-gray: var(--fox-not-white);

 --fox-white: #ffffff;
 --fox-not-white: #f2f4f6;
 --fox-black: #3B474D;
}

/*
 * Fonts
 */

h1, h2, h3, h4 {
  font-family: Poppins;
}

h5, h6 {
  font-family: Poppins;
}

div > p { margin-bottom: 0; }

/*
 * global
 */

body {
  color: #3b474d;
  font-family: Poppins;
}
a, a:hover { 
  color: var(--fox-blue);
}
/*
 *
 * button and switches
 *
 */

.btn-outline-primary:hover, .btn-primary:hover  {
	-webkit-box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
	-moz-box-shadow:  0 0 15px 0 rgba(183, 202, 212, 0.7);
	box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
}
.btn[disabled], .btn[disabled]:hover, .btn-outline-primary:hover {
	color: white;
	background-color: var(--fox-not-white);
	border-color: var(--fox-not-white);
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.btn.btn_circular {
    border-radius: 50%;
    height: 42px;
    width: 42px;
    padding: 5px;
    line-height: 0;
    margin: 0;
}


.btn-outline-primary {
  color: var(--fox-light-orange);
  border-color: var(--fox-not-white);
}
.btn-outline-primary:hover {
	background-color: var(--fox-not-white);
  border-color: var(--fox-not-white);
 	color: var(--fox-light-orange);
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
	background-color: var(--fox-not-white);
  border-color: var(--fox-not-white);
 	color: var(--fox-light-orange);
}

/*
 * Toggle Buttons
 */
.btn-toggle:hover {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.btn-toggle {
    margin: 0;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem;
    color: #6b7381;
    background: #ffffff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.btn-lg.btn-toggle[disabled] > .handle {
 	background-color: var(--fox-light-orange);
  border: none;

}
.btn-toggle.btn-lg {
    margin: 0;
    padding: 0;
    position: relative;
    border: 1px solid var(--fox-not-white) ;
    height: 2.5rem;
    width: 5rem;
    border-radius: 2.5rem;
}
.btn-toggle.btn-lg:not(.active):before {
    content: 'Off';
    left: 1rem;
}
.btn-toggle.btn-lg.active:after {
    content: 'On';
    right: 1rem;
    opacity: 1;
    color: white;
}
.btn-toggle.btn-lg:before, .btn-toggle.btn-lg:after {
    line-height: 2.25rem;
    width: 5rem;
    text-align: center;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    bottom: 0;
    transition: opacity .25s;
}
.btn-toggle:before, .btn-toggle:after {
    color: #6b7381;
}
.btn-toggle.btn-lg > .handle {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 1.875rem;
    background: #ffffff;
    transition: left .25s;
    border: 3px solid var(--fox-blue);
}
.btn-toggle.btn-lg.active {
    transition: background-color 0.25s;
}
.btn-toggle.active {
    background-color: var(--fox-blue);
}
.btn-toggle.btn-lg.active > .handle {
    left: 2.8125rem;
    transition: left .25s;
    -webkit-box-shadow:0 0 15px 0 rgba(183, 202, 212, 0.7);
    -moz-box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
    box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
    border: none;
}

/*
 * checkboxes
 */
.custom-control-label {
  padding-left: 1em;
  padding-top: 0.5em;
}

.custom-control-label::after, .custom-control-label::before {
  width: 2rem;
  height: 2rem;
}

.custom-control-label::before {
  background-color: #ffffff;
  border: 1px solid var(--fox-not-white);
}

.custom-control-label:hover::before {
	background-color: var(--fox-not-white);
  border-color: var(--fox-not-white);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--fox-blue);
}

/*
 * radio buttons
 */
.custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--fox-blue);
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: var(--fox-blue);
}

/*
 * dropdown
 */
.dropdown .navbar-toggler-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  margin-left: 3rem;
}

.dropdown .btn {
  padding-left:2rem;
  padding-right:2rem;
}

.dropdown .btn.carrot::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: baseline;
  content: "\f106";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  float: right;
}

.dropdown.show .btn.carrot::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: baseline;
  content: "\f107";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
}

.dropdown-menu {
  padding: 0
}

.dropdown-menu.show {
  padding: 0px;
  box-shadow: 0 0 8px 0 rgba(183, 202, 212, 0.7);
}

.dropdown.dropdown_checkbox a {
  color: #231F20;
}
.dropdown.dropdown_checkbox .custom-control-label {
  text-indent: -99999px;
  padding-left: 0;
}

.dropdown-item {
  color: #231F20;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #dce6eb;
  padding-left: 1em;
}

.dropdown-item:active {
  background-color: transparent !important;
}

.dropdown-item:last-child {
  border: none
}

.dropdown-item:focus, .dropdown-item:hover {
  border-bottom: 1px solid var(--fox-blue);
  color: #231F20;
}

/*
 * modal
 */
.vertical-alignment-helper {
  display:table;
  height: 100%;
  width: 100%;
  pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events:none;
}
.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width:inherit;
  max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  height:inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all;
}
.modal-footer {
  justify-content: space-between;
  border: 0;
}
.modal-header {
  border: 0;
}
.modal-content {
  padding: 15px;
  border: none;
	-webkit-box-shadow:0 0 15px 0 rgba(183, 202, 212, 0.7);
	-moz-box-shadow:0 0 15px 0 rgba(183, 202, 212, 0.7);
	box-shadow:0 0 15px 0 rgba(183, 202, 212, 0.7);
}

/*
 * accordian
 */
.custom_card .custom_card_header .btn.btn-link {
	padding: .375rem .75rem;
}
.custom_card {
	border: none;
}
.custom_card .custom_cardUheader {
	border: none;
	padding: 0;
	background: #ffffff;
}

.custom_card .card_header .btn{
	background: transparent;
	color: black;
	border: none;
	background: #ffffff;
	display: block;
	width: 100%;
	text-align: left;
	border-radius: 0;
	padding-left: 0;
}

.custom_card .card_header .btn.collapsed {
	border-bottom: 1px solid var(--fox-not-white);
}
.custom_card .custom_cardUheader .btn:not(.collapsed) .plus{
	display:none;
}
.custom_card .custom_card_header .btn.collapsed .minus{
	display: none;
}

.nav-link.btn {
  color: black;
}
.nav-link.btn:hover {
	background-color: var(--fox-not-white);
  border-color: var(--fox-not-white);
 	color: var(--fox-light-orange);
}

.nav-link.btn.active {
	background-color: var(--fox-blue);
	border-color: var(--fox-blue);
  color: white
}

/*
 * text inputs
 */
.custom-select.is-invalid:focus,
.form-control.is-invalid:focus,
.custom-select.is-valid:focus,
.form-control.is-valid:focus {
  box-shadow: none;
  border: 1px solid var(--fox-not-white);
}

input.form-control:hover {
	-webkit-box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
	-moz-box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
	box-shadow: 0 0 15px 0 rgba(183, 202, 212, 0.7);
}

input[type=text].form-control,
textarea.form-control {
  border: 1px solid var(--fox-not-white);
}

input[type=text].form-control:focus,
textarea.form-control:focus {
  background-color:var(--fox-not-white);
  box-shadow: none;
}

.custom-select.is-invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.was-validated .form-control:invalid {
  border: 1px solid var(--fox-blue) !important;
}

textarea.form-control:focus {
  border-color: var(--fox-blue);
}

.counter {
  color: var(--fox-blue);
  float: right;
}

.dropdown.story_dropdown_checkbox ,
.dropdown.story_dropdown_single {
  border-bottom: 1px solid  #dce6eb;
}
.dropdown.story_dropdown_checkbox button,
.dropdown.story_dropdown_single button {
  background: transparent;
  border-radius: 0;
  display: block;
  border: none;
  color: black;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  text-align: left;
}
.dropdown.story_dropdown_single {
  background: transparent;
}
.dropdown.story_dropdown_single .dropdown-menu {
  width: 100%; /* this may not be a good idea */
}
.dropdown.story_dropdown_single button:hover {
  box-shadow: none;
}

.dropdown.dropdown_checkbox .dropdown-item {
  cursor: pointer;
}
.dropdown.dropdown_checkbox .dropdown-item a:hover {
  text-decoration: none;
}

.dropdown.story_dropdown_checkbox .dropdown-menu {
  width: 100%;
}
.dropdown.story_dropdown_checkbox .dropdown-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/*
 * table
 */
.custom_row {
  border-bottom: 1px solid var(--fox-not-white);
}

.custom_row .custom_detail {
  display: flex;
  align-self: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.custom_heading {
  border-bottom: 2px solid var(--fox-not-white);
  padding-bottom: 5px;
}
.custom_heading .custom_detail {
  color: black;
  font-weight: bold;
}

.custom_row .action_buttons {
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.custom_table .expanded_details {
  background-color: var(--fox-not-white);
}

/*
 * Summernote
 */

/*
 * resize interact
 */
.resize-drag {
  background-color: transparent;
  color: black;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  border: 1px dashed white;
  word-wrap: break-word;
  overflow: hidden;

  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  display: inline-block;
width: 100%; background: rebeccapurple;
  text-align:center;
}
.resize-container .resize-drag{
  position: absolute;
}

.selectable {
  cursor: pointer
}

/*
 * navbar
 */
.navbar-brand img {
  height: 50px;
}
.navbar-right .user_dropdown::after {
  display: none;
}
.navbar.fox_orange {
  background-color: var(--fox-blue) !important;
}
.navbar-light .navbar-nav .nav-link {
  color: white
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active>.nav-link{
  color: #f4f3d1 

}

.demo .navbar.fox_orange {
  background-color: #10B1D9 !important;
}

table.table th {
  border: none;
  font-family: Poppins;
}