/*--------------------------------------
|
| Theme: Default
|
| Files to adjust for imaging if needed:
|
| .env : APP_THEME setting -> themes.default
| .env : APP_LOGO setting (default image)
| 
| Template File Directory:
|
| /resources/views/themes/default
|
/*--------------------------------------*/

/**COLOR SETTINGS**/
:root {
    --primary: #7c217e;
    --primary-hover: #2db5be;
    --primary-light: #b32fb6;
    --primary-light-hover: #3de7f3;
    --primary-rgb: 124, 33, 126;
}
/**COLOR SETTINGS**/

/**ICONS**/
@font-face {
    font-family: 'ExtraInnings';
    src: url('fonts/extrainnings.eot');
    src: url('fonts/extrainnings.eot?#iefix') format('embedded-opentype'),
         url('fonts/extrainnings.woff') format('woff'),
         url('fonts/extrainnings.ttf') format('truetype'),
         url('fonts/extrainnings.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{display: inline-block;font-family: 'ExtraInnings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.icon-bear:before{content:'\e800';}
.icon-bear-inverted:before{content:'\e801';}
/**ICONS**/

@font-face { font-family: 'PlayPretend'; src: url('fonts/Play-Pretend.otf');}


/* SET COLORS FOR BOOTSTRAP */
a {color: var(--primary);}
a:focus, a:hover {color: var(--primary-hover);}

.table-primary, .table-primary>td, .table-primary>th {background-color: var(--primary-light);}
.table-primary tbody+tbody, .table-primary td, 
.table-primary th, .table-primary thead th {border-color: var(--primary);}
.table-hover .table-primary:hover {background-color: var(--primary-light-hover);}
.table-hover .table-primary:hover>td, 
.table-hover .table-primary:hover>th {background-color: var(--primary-light-hover);}

.btn.btn-primary {color: #fff; background-color: var(--primary);border-color: var(--primary);}
.btn.btn-primary:active,.btn.btn-primary:focus,.btn.btn-primary:hover {color: #fff; background-color: var(--primary-hover);border-color: var(--primary-hover);box-shadow: 0 14px 26px -12px rgba(var(--primary-rgb), 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(var(--primary-rgb), 0.2);}
.btn.btn-primary:not(:disabled):not(.disabled).active, 
.btn.btn-primary:not(:disabled):not(.disabled):active, 
.show>.btn.btn-primary.dropdown-toggle {color: #fff; background-color: var(--primary-hover);border-color: var(--primary-hover);}
.btn.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn.btn-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn.btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), 0.2);}
.btn.btn-outline-primary {color: var(--primary);border-color: var(--primary);}
.btn.btn-outline-primary:hover {color: #fff; background-color: var(--primary);border-color: var(--primary);}
.btn.btn-outline-primary.focus, .btn.btn-outline-primary:focus {box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), 0.2);}
.btn.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show>.btn.btn-outline-primary.dropdown-toggle {background-color: var(--primary);border-color: var(--primary);}
.btn.btn-outline-primary:not(:disabled):not(.disabled).active:focus, 
.btn.btn-outline-primary:not(:disabled):not(.disabled):active:focus, 
.show>.btn.btn-outline-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), 0.2);}
.btn.btn-link {color: var(--primary);}
.btn.btn-link:hover {color: var(--primary-hover);}
.btn.btn.btn-primary.btn.btn-link {background-color: transparent;color: var(--primary);box-shadow: none;}
.btn.btn.btn-primary.btn.btn-link:hover, .btn.btn.btn-primary.btn.btn-link:focus, .btn.btn.btn-primary.btn.btn-link:active {background-color: transparent;color: var(--primary);}

.bg-primary {background-color: var(--primary)!important;}
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, 
button.bg-primary:hover {background-color: var(--primary-hover)!important;}

.border-primary {border-color: var(--primary)!important;}
.text-primary {color: var(--primary)!important;}
a.text-primary:focus, a.text-primary:hover {color: var(--primary-hover)!important;}

.alert.alert-primary {background-color: var(--primary);border-color: var(--primary-light);}
.alert.alert-primary hr {border-top-color: var(--primary-light-hover);}
.alert.alert-primary .alert-link {color: var(--primary-hover);}

.badge-primary {background-color: var(--primary);}
a.badge-primary:focus, a.badge-primary:hover {background-color: var(--primary-hover);}

.dropdown-menu .dropdown-item.active, 
.dropdown-menu .dropdown-item:active
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active {background-color: var(--primary); color: #fff;}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background-color: var(--primary);}

.page-link {color: var(--primary);}
.page-link:hover {color: var(--primary-hover);}
.page-item.active .page-link {background-color: var(--primary);border-color: var(--primary);}

.progress-bar {background-color: var(--primary);}

.togglebutton label input[type=checkbox]:checked+.toggle:after {border-color:var(--primary);}

.card .card-header-primary .card-icon, .card .card-header-primary:not(.card-header-icon):not(.card-header-text), 
.card .card-header-primary .card-text {box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(var(--primary-rgb), 0.2);}
.card .card-header-primary .card-icon, .card .card-header-primary .card-text, .card .card-header-primary:not(.card-header-icon):not(.card-header-text), 
.card.bg-primary, .card.card-rotate.bg-primary .front, .card.card-rotate.bg-primary .back {background: var(--primary); background: linear-gradient(60deg, var(--primary), var(--secondary));}

.list-group-item.active {background-color: var(--primary);border-color: var(--primary);}
.list-group-item-primary {color: var(--primary);background-color: var(--primary-light);}
.list-group-item-primary.list-group-item-action:focus, 
.list-group-item-primary.list-group-item-action:hover {color: var(--primary);background-color: var(--primary-light-hover);}
.list-group-item-primary.list-group-item-action.active {background-color: var(--primary);border-color: var(--primary);}

.custom-control-input:checked~.custom-control-label::before {background-color: var(--primary);border-color: var(--primary); }
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {background-color: var(--primary);}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {background-color: var(--primary);}
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-range::-webkit-slider-thumb {background-color: var(--primary);}
.custom-range::-moz-range-thumb {background-color: var(--primary);}
.custom-range::-ms-thumb {background-color: var(--primary);}


.custom-control-input:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {background-color: var(--primary);}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {background-color: var(--primary);}
.custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--primary);}
.custom-range::-webkit-slider-thumb {background-color: var(--primary);}
.custom-range::-moz-range-thumb {background-color: var(--primary);}
.custom-range::-ms-thumb {background-color: var(--primary);}

.custom-switch.switch-danger .custom-control-input:checked~.custom-control-label::before {background-color: var(--danger);}
.custom-switch.switch-danger .custom-control-input:disabled:checked~.custom-control-label::before {background-color: var(--danger);}

.form-group {margin-bottom: 1.5rem;}

/* THEME STYLING */

html, body {background-color: #202247;color: #fff;font-family: 'Nunito', sans-serif;font-size: 16px;height: 100%;margin: 0;}
img {max-width: 100%; height: auto;}
iframe {max-width: 100%; border: none;}


.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6 {margin-top: .75rem; ;margin-bottom: 1.15rem; font-family: 'PlayPretend','Nunito', sans-serif; letter-spacing: 2px;}

.table-vtop>tr>th,.table-vtop>tr>td,.table-vtop>thead>tr>th,.table-vtop>thead>tr>td,
.table-vtop>tbody>tr>th,.table-vtop>tbody>tr>td,.table-vtop>tfoot>tr>th,.table-vtop>tfoot>tr>td {vertical-align: top!important;}
.table-vcenter>tr>th,.table-vcenter>tr>td,.table-vcenter>thead>tr>th,.table-vcenter>thead>tr>td,
.table-vcenter>tbody>tr>th,.table-vcenter>tbody>tr>td,.table-vcenter>tfoot>tr>th,.table-vcenter>tfoot>tr>td {vertical-align: middle!important;}
.table-vbottom>tr>th,.table-vbottom>tr>td,.table-vbottom>thead>tr>th,.table-vbottom>thead>tr>td,
.table-vbottom>tbody>tr>th,.table-vbottom>tbody>tr>td,.table-vbottom>tfoot>tr>th,.table-vbottom>tfoot>tr>td {vertical-align: bottom!important;}

.border-md {border-width: 3px!important;}
.border-lg {border-width: 6px!important;}

.font-sm {font-size: 0.75rem}
.font-md {font-size: 1.15rem}
.font-lg {font-size: 1.25rem}

.btn-tikkie {background-color: #56519d; color: #fff;}
.btn-tikkie:hover,.btn-tikkie:focus,.btn-tikkie:active {background-color: #433f7a; color: #fff;}

.text-shadow {text-shadow: -1px 0 #101010, 0 1px #101010, 1px 0 #101010, 0 -1px #101010;;}

.card,.bg-white,.modal-dialog  {color: #414649;}

#mobileBottomFixed {display: none; background-color: rgba(255,255,255,0.5); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10; font-size: .8rem;}

#pagewrapper {min-height: 100%;}
#pageLoader {position: fixed; top: 0; left: 0; z-index: 1040; width: 100%; height: 100%; background: rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center;}

#header {min-height: 90px;}
#header .navbar {position: fixed; top: 0; left: 0; right: 0; background-color: #202247; color: #fff; z-index: 1030;}
#header .navbar.navbar-scrolled {background-color: rgba(32,34,71,0.6); transition: background-color 1s ease-in;}
#header .navbar .navbar-logo img {height: 75px; width: auto;}

#header .navbar .nav-item {position: relative;}
#header .navbar .nav-item .nav-link  {color: var(--primary-hover);}
#header .navbar .nav-item .nav-link .nav-title {padding: 0 .5rem; color: var(--primary-hover);}
#header .navbar .nav-item .nav-link.active,
#header .navbar .nav-item .nav-link:hover,
#header .navbar .nav-item .nav-link:hover .nav-title,
#header .navbar .nav-item .nav-link.active .nav-title {color: var(--primary);}
#header .navbar .nav-item .nav-link .caret {display: inline-block; position: absolute;top: 18px;right: 0px;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px dashed rgb(169,  175,  187);border-right: 4px solid transparent;border-left: 4px solid transparent;transition: all 150ms ease-in;}
#header .navbar .nav-item .nav-link[aria-expanded="true"] .caret {transform: rotate(90deg);}
#header .navbar .nav-item .dropdown-menu {background-color: #202247; border-color: rgba(255,255,255,.5); padding: 0; overflow: hidden; border-radius: 0;}
#header .navbar .nav-item .dropdown-menu .dropdown-item {padding: .5rem 1rem;}
#header .navbar .nav-item .dropdown-menu a {background-color: transparent; color: rgba(255,255,255,.5);}
#header .navbar .nav-item .dropdown-menu a.active, 
#header .navbar .nav-item .dropdown-menu a:hover, 
#header .navbar .nav-item .dropdown-menu a:focus, 
#header .navbar .nav-item .dropdown-menu a:active {background-color: transparent;color: rgba(255,255,255,.9);}

#footer {font-size: .875rem; background-color: #202247;}
#footer .navbar-nav .nav-item .nav-link {padding-right: 1rem; padding-left: 1rem; margin: 0 .25rem;}

@media (max-width: 991px)  { 
    #header {min-height: 65px;}    
    #header .navbar .navbar-logo img {height: 50px; width: auto;}    

    #header .navbar .navbar-nav {margin-top: 1rem;overflow-y: auto; max-height: 75vh;}
    #header .navbar .nav-item {border-top: 1px solid rgba(var(--primary-rgb),.3);}
    #header .navbar .nav-item .nav-link,
    #header .navbar .dropdown-menu .dropdown-item {padding-top: 1rem; padding-bottom: 1rem;}
    #header .navbar .dropdown-menu {border: none; }

    #mobileBottomFixed {display: block;}
}

@media (max-width: 767px)  { 

    .h1, h1 {font-size: 2rem;}
    .h2, h2 {font-size: 1.5rem;}
    .h3, h3 {font-size: 1.35rem;}
    .h4, h4 {font-size: 1.15rem;}
    .h5, h5 {font-size: 1.05rem;}

    th.d-block,td.d-block {width: 100%; clear: both;}
    th.d-inline-block,td.d-inline-block {width: 50%;}

    .table.bg-white {background-color: transparent!important;}
    .table.bg-white th,.table.bg-white td {background-color: #fff!important;}

    .display-1 {font-size: 4rem;}
    .display-2 {font-size: 3.5rem;}
    .display-3 {font-size: 2.5rem;}
    .display-4 {font-size: 1.5rem;}
}