@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

app {position: relative;display: flex;flex-direction: column;}
html, body {/*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/font-family: Exo, sans-serif !important;}
a, .btn-link {/*color: #0366d6;*/color: #243947;}
.top-row {height: 3.5rem;display: flex;align-items: center;}
div.row {padding-top: 10px;padding-bottom: 10px;}
.main {flex: 1;width: calc(100% - 250px);}
.main.dark {background: #000;}
.main .top-row {background-color: #f7f7f7;border-bottom: 1px solid #d6d5d5;justify-content: flex-end;}
.main .top-row > a, .main .top-row .btn-link {white-space: nowrap;margin-left: 1.5rem;}
.main .top-row a:first-child {overflow: hidden;text-overflow: ellipsis;}
.sidebar {/*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/background: #243947;border-right:1px solid #f1f1f1;position:relative;}
.sidebar.dark {background: #000;}
.sidebar .top-row {background-color: rgba(0,0,0,0.4);}
.sidebar .navbar-brand {font-size: 1.1rem;}
.sidebar .oi {width: 2rem;font-size: 1.1rem;vertical-align: text-top;top: -2px;}
.sidebar .nav-item {font-size: 0.8rem;padding-bottom: 0.5rem;}
.sidebar .nav-item:first-of-type {padding-top: 1rem;}
.sidebar .nav-item:last-of-type {padding-bottom: 1rem;}
.sidebar .nav-item a {/*color: #d7d7d7 !important;*/color: #ffffed !important;border-radius: 5px;height: 2.5rem;display: flex;align-items: center;line-height: 2.5rem;}
.sidebar .nav-item a.active {background-color: rgba(255,255,255,0.25);color: white;}
.sidebar .nav-item a:hover {background-color: rgba(255,255,255,0.1);color: white;}
.sidebar .rounded-image-container {width: 125px;height: 125px;margin: 0 auto;}
.sidebar .nav-profile {color: #ffffed;font-size: 12px;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;background-size: cover !important;
        background-position: center center !important;}
.sidebar .nav-profile .overlay{background: rgba(0,0,0,0.3);}
.sidebar .nav-profile .oi {font-size: 14px;width: 20px;}
.sidebar .nav-profile p {margin:0 auto;}
.sidebar .nav-profile p.username {font-size:14px;font-weight: bold;color: #ffffed;text-decoration: none;}
.sidebar .nav-profile p.email {font-size:11px;color: #ffffed;text-decoration: none;}
.sidebar .nav-profile p.username:hover {text-decoration: underline;}
.sidebar .nav-profile p.email:hover {text-decoration: underline;}
.sidebar .nav-profile p.logout {text-decoration:underline;cursor:pointer;color: #ffffed;}
.sidebar .nav-profile p.logout a {color: #ffffed !important;}
.sidebar .nav-profile p.logout:hover {font-weight: bold;}
.content {height:100%;}
.control-section{min-height: 100%;}
.control-section.dark {background: #000;padding-bottom:2px;color: #f1f1f1;}
.content-wrapper {padding-top: 1.1rem;}
.navbar-toggler {background-color: rgba(255, 255, 255, 0.1);float:right;}
.valid.modified:not([type=checkbox]) {outline: 1px solid #26b050;}
.invalid {outline: 1px solid red;}
.validation-message {color: red;padding-left: 10px;font-size:12px;}
#blazor-error-ui {background: lightyellow;bottom: 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);display: none;left: 0;padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;width: 100%;z-index: 1000;}
#blazor-error-ui .dismiss {cursor: pointer;position: absolute;right: 0.75rem;top: 0.5rem;}
.squared-image-container {background: #eee;width: 50px;height: 50px;display: inline-block;border-radius: 5px;border: 1px solid #aaa;margin-left: 5px;}
.squared-image-container img {width:100%}
.borderBottom {border-bottom: 1px solid #243947;margin-bottom:10px;}
.dark .borderBottom {border-bottom: 1px solid #fff;}
.main .profile .content-wrapper {overflow-x: hidden;padding: 0px !important;margin: 0;}
.main .profile {height:100vh;}
.profile .copertina {background-position: center center !important;background-size: cover !important;width: 100%;min-height: 350px;max-height: 40%;cursor: pointer;}
.profile .confirmButton {background: none;border: 0;}
.profile .confirmButton:hover {color: green;font-size: 18px;}
.profile .editButton {cursor: pointer;}
.profile .editButton:hover {color: #243947;font-size: 18px;}
.dark.profile .text-black-50 {color: #000 !important;}
.dark.profile .sidebar-info-profile {color: #000;}
.profile .noProfileImage {background: rgba(0,0,0,0.5);position: absolute;width: 100%;height: 100%;top: 0;left: 0;cursor: pointer;}
.profile .noProfileImage:hover {background: rgba(0,0,0,0.7);}
.profile .noProfileImage p {font-weight: bold;text-align: center;font-size: 18px;color: #fff;margin-top: 5%;padding:5px;}
.profile .sidebar-info-profile {margin-top: -210px;font-size: 14px;}
.profile #button_language button {background:none;border: 0px;}
.profile .sidebar-info-profile .info-container {margin: 0 auto;border: 1px solid #243947;background: #eee;}
.profile .profile-image .rounded-image-container{width: 150px;height: 150px;position:relative;}
.profile .profile-image .rounded-image-container:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.6);}
.rounded-image-container .image-container,
.squared-image-container .image-container {background-size: cover !important;width: 100%;height: 100%;background-position: center center !important;
    background-repeat: no-repeat !important;cursor: pointer;}
.rounded-image-container {background: #eee;width: 40px;height: 40px;display: inline-block;border-radius: 50%;border: 1px solid #ccc;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);margin-left: 5px;overflow: hidden;}
.rounded-image-container img {width: 100%;}
.card-header {cursor:pointer;margin: 0 15px;padding: 7px;}
.card-header:before {padding-top: 6px;/*content: "\2B9F";*/content: url('../images/chevron-right.png');float: left;}
.card-header.collapsed:before {/*content: "\2B9E";*/content: url('../images/chevron-bottom.png');}
.toolbar-right {border-left: 2px solid #ccc;}
.toolbar-right .oi{width:15px;text-align:center;color: #243947;}
.ticket-description {border: 1px solid #243947;min-height: 120px;width: 100%;background: rgba(0,0,0,.03);padding: 10px;border-radius: 15px;overflow-y: auto;}
.speech-bubble {position: relative;background: #00aabb;border-radius: .4em;padding:5px;min-height: 50px;width: 100%;}
.speech-bubble:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 19px solid transparent;border-right-color: #00aabb;border-left: 0;border-bottom: 0;
        margin-top: -9.5px;margin-left: -19px;}
.icon-width .oi {width: 25px;text-align: center;padding-right: 5px;color:#243947; }
#dropArea {padding: 25px 25px 0px 15px;border: 1px dotted #243947;text-align: center;width: 100%;background: #ddd;}
.e-file-select, .e-file-drop {display: inline;}
.e-upload-drag-hover {outline: 2px dashed #243947;}
.status {margin-top: 5px;margin-bottom: 5px;width: 97%;font-size: 10px;border-radius: 10px;height: 30px;color: #ffffed;font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);padding: 4px;text-align: center;box-shadow: 1px 1px 3px rgba(0,0,0,0.7);text-transform: uppercase;letter-spacing: -0.5px;}
.Open-state, .Active-state,.Low-state {background: #81D742;}
.TakenCharge-state {background: #0178BE;}
.WaitingForCustomersAnswer-state {background: #014b68;}
.InProgress-state,.Medium-state {background: #FF9F1C;}
.ClosingConfirmation-state {background: #355262;}
.Closed-state,.High-state {background: #DD3333;}
.PreOpen-state,.NotAssigned-state {background: #AAA;}
.dark .option-button {color: #fff;}
.option-button {color: #ffffed;font-size: 16px;color: #000;text-shadow: 1px 1px 3px rgba(0,0,0,0.7);cursor: pointer;}
.option-button.disabled {cursor:initial;color: #ddd;}
.btn-message-rounded {position: absolute;top: 3px;right: 40px;border-radius: 25px;margin-top: 10px;padding: 0px 5px;color: #ffffed}
.btn-message-rounded span {color: #ffffed !important;font-size: 12px;}
.input-message {border-radius: 15px;outline: none !important;padding-left: 5px;padding-right: 90px;margin-left: 10px;}
.contract-linear-detail {text-align: center;padding: 0px;}
.contract-linear-detail p {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px solid #ddd;width: 80%;margin:0 auto;}
.contract-linear-detail div {margin-top: 5px;}
.copyright {position: absolute;bottom:0;border-top: 1px solid #ddd;color: #ffffed;font-size:9px;text-align: right;width: 100%;height: 70px;padding-top: 5px;
   padding-right: 10px;}
.copyright a {cursor: pointer;color: #ffffed;}
.copyright a:hover{text-decoration: underline;}
.copyright sfbutton {font-weight: bold;cursor: pointer;}
.copyright sfbutton:hover {text-decoration: underline;}
#card_list {list-style: none;width:100%;display:inline-block;height:100%;}
#card_list li{width:90%;float:left;margin:10px;}
#card_list.small-cards li {width:45%;}
#card_list li #gauge_container {width: 100%;height: 90px;}
#card_list li .e-card .e-card-header .e-card-header-caption .e-card-header-title {font-size: 20px;font-weight: 500;line-height: 20px;}
.e-card .e-card-actions button {background: #224b66 !important; /*rgba(34, 75, 102, 1);*/border: 1px solid rgba(34, 75, 102, 1) !important;
    padding: 0px 5px !important;color: #fff;border-radius: 5px;}
.e-card .e-card-actions button[disabled] {background: #ddd !important;}
.e-card .e-card-actions button:hover {background: rgba(34, 75, 102, 0.8) !important;color: white !important;}
#card_list .e-card-stacked{border-left: 1px solid #224b66;}
.dark #card_list .e-card {box-shadow: 0px 0px 6px rgba(255,255,255,0.2);background: rgba(43, 41, 41,0.7);color: #f1f1f1;}
.dark .e-card-header-title,
.dark .e-card-content {color: #f1f1f1 !important;}
#card_list .e-card {box-shadow: 0px 0px 6px rgba(0,0,0,0.2);border: 2px solid #224b66;background: rgba(0,0,0,0.02);}
.dark #card_list .e-card:hover {box-shadow: 0px 0px 6px rgba(255,255,255,0.6);background: rgba(43, 41, 41,1);cursor: pointer;}
#card_list .e-card:hover {box-shadow: 0px 0px 6px rgba(0,0,0,0.6);background: rgba(0,0,0,0.06);cursor: pointer;}
#card_list li .e-card-image {background-position: center;}
#card_list li .alert.small-alert {padding-left: 15px;padding-top: 0px;padding-bottom: 0px;margin: 10px;max-height:35px;}
#card_list li .availability-container {font-size: 10px;font-weight: bold;height: 35px;margin-top: 5px;}
#card_report .image-download {cursor: pointer;margin: 5px;}
#card_report .image-download.pdf {width:30px;}
#card_report .image-download.excel {width: 40px;}
#card_report .image-download.pdf:hover {margin: 0px;width:35px;}
#card_report .image-download.excel:hover {margin: 0px;width: 45px;}
#card_report .e-card {box-shadow: 0px 0px 6px rgba(0,0,0,0.2);border: 2px solid #224b66;background: rgba(0,0,0,0.02);}
#card_report .e-card:hover {box-shadow: 0px 0px 6px rgba(0,0,0,0.6);background: rgba(0,0,0,0.06);}
.dark #card_report .e-card {box-shadow: 0px 0px 6px rgba(255,255,255,0.2);border: 2px solid #224b66;background: rgba(43, 41, 41,0.7);color: #f1f1f1;}
.dark #card_report .e-card:hover {box-shadow: 0px 0px 6px rgba(255, 255, 255,0.6);background: rgba(43, 41, 41,1);cursor: pointer;}
#card_report .e-card .e-card-header-title {font-size: 18px;font-weight: bold;}
#card_report .e-card .e-card-header-image {border-radius: 50%;width: 45px;height: 45px;}
#card_report .e-card .e-card-content .filter-container{min-height:220px;}

/* START UPLOADER CLASSES */
.file-row {background-color: #e4e4e4;padding: 1rem 1rem;margin-top: 0.5rem;border-radius: 0.6rem;color: #555;display: flex;align-items: center;border: 1px solid #243947;}
.file-row h2 {margin: 0.3rem 0 0.6rem 0;font-weight: bold;color: black;font-size: 1rem;}
.file-row > div {flex-grow: 1;}
.file-row button {padding: 5px 13px;background-color: #243947;color:#fff;border-radius: 25px;border: none;border-width: 0;box-shadow: none;}
.drag-drop-zone {border: 2px dashed #243947;padding: 1rem;display: flex;align-items: center;justify-content: center;background-color: #eee;box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #aeaeae;font-size: 1rem;cursor: pointer;position: relative;}
.drag-drop-zone:hover {background-color: #f5f5f5;}
.drag-drop-zone input[type=file] {position: absolute;width: 100%;height: 100%;opacity: 0;cursor: pointer;}
/* END UPLOADER CLASSES*/

/* START OVERRIDE BOOTSTRAP */
.btn.btn-primary {background: #224b66 !important; /*rgba(34, 75, 102, 1);*/border: 1px solid rgba(34, 75, 102, 1) !important;padding: 5px 10px !important;}
.btn.btn-primary:hover {background: rgba(34, 75, 102, 0.8) !important;color: white !important;}
.form-group input, .form-group select, .form-group textarea {border-radius: 15px;border: 1px solid #224b66;background: #fff;}
.invalid {outline: 0;border-color: red !important;}
.valid.modified {outline: 0 !important;border-color: #26b050;}
/* END OVERRIDE BOOTSTRAP */

/* START OVERRIDE SYNCFUSION */
.e-table, .e-tab, .e-card, .e-circulargauge {font-family: Exo, sans-serif !important;}
.dark .e-table {background: #000;   }
.dark .e-table th {background: #000;}
.e-table td{font-size: 12px !important;}
.dark .e-table td, 
.dark .e-table th {color: #f1f1f1 !important;}
.dark .e-pagercontainer,
.dark .e-pagercontainer .e-pager-default,
.dark .e-numericcontainer .e-numericitem,
.dark .e-numericcontainer .e-pager-default {background: #000;}
.dark .e-pager {background: #2b2929;color: #f1f1f1;}
.e-altrow {background-color: #dcdcdc;}
.dark .e-altrow {background-color: #2b2929;}
.e-card-content .e-input-group {margin-top: 5px;margin-bottom: 5px;}
.e-columnheader {padding-left: 10px !important;}
th.e-headercell {padding: 0px 10px !important;margin: 0px !important;}
th.e-headercell:first-child {padding-left: 15px !important;}
.e-toolbar-left .e-toolbar-item {margin-left: 0 !important;}
.e-toolbar-right .e-toolbar-item {margin-right: 0 !important;}
tr.e-row td.e-rowcell {padding: 0px 5px !important;margin: 0px !important;}
tr.e-row td.e-rowcell:first-child {padding-left: 10px !important;}
.e-numericitem.e-active {background: #224b66 !important;}
.e-toolbar-items.e-tbar-pos {background: #224b66 !important;}
.e-toolbar .e-toolbar-items {min-height: 45px !important;}
.e-tab-header .e-toolbar-items {min-height:32px !important;}
.e-file-select-wrap {border: 1px dotted #243947;background: #ddd;text-align: center;}
.e-upload .e-file-select-wrap, .e-bigger.e-small .e-upload .e-file-select-wrap {padding: 10px 0px 10px 0px;}
.dark .e-detailcell {background: #2b2929;color: #f1f1f1;}
.e-detailcell {background: #ffffed;}
.e-grid .e-toolbar {border-top: 0px !important;}
.dark .e-gridcontent .e-content{background: #000;}
.e-item.e-active {border-left:1px solid #ddd;border-bottom: 1px solid #ddd;}
.dark .e-tab .e-content .e-item{color: #f1f1f1;}
.dark .text-black-50 {color: #f1f1f1 !important;font-weight: bold;}
.e-custom {margin-top: 5px;}
.e-custom .e-frame {border-radius: 100%;width: 20px;height: 20px;font-size: 13px;padding-top: 3px;}
.e-custom input {font-size:14px;}
/* END OVERRIDE SYNCFUSION */

/* SPINNER SECTION */
#spinner-overlay {position:fixed;top: 0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.3);z-index: 999;}
.dark #spinner-overlay {background: rgba(255,255,255,0.3);}
#spinner-container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.spinner {position: relative;}
.spinner:before, .spinner:after {content: "";position: relative;display: block;}
.spinner:before {animation: spinner 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;content: url('/images/CloudiaResearch-icona-small.png');
        width: 5em;height: 5em;background-color: #ffffed;border-radius: 50%;padding-top:20px;padding-left:13px;}
.spinner:after {animation: shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;bottom: -1em;height: .5em;border-radius: 50%;background-color: rgba(0,0,0,0.5);}
@keyframes spinner {
    50% {transform: scale(0.3) rotate(360deg);background-color: #224b66;border-radius: 0%;}
    100% {border-radius: 50%;transform: scale(1) rotate(720deg);}
}
@keyframes shadow {
    50% {transform: scale(0.5);background-color: rgba(0,0,0,0.7);}
}
/* END SPINNER SECTION */

@media (max-width: 1200px) {
    #card_list.small-cards li {width: 90%;}
    #card_list li {width: 90%;}
}
@media (min-width: 768px) {
    app {flex-direction: row;}
    .sidebar {width: 250px;height:100vh;position:sticky;top: 0;}
    .main .top-row {position: sticky;top: 0;}
    .main .content-wrapper {padding-left: 2rem !important;padding-right: 1.5rem !important;}
    .navbar-toggler {display: none;}
    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
@media (max-width: 767.99px) {
    h1 {font-size:1.5rem}
    .main {width:100%;}
    .main .top-row:not(.auth) {display: none;}
    .main .top-row.auth {justify-content: space-between;}
    .main .top-row a, .main .top-row .btn-link {margin-left: 0;}
    #card_list {padding: 0 10px 0 0;width:100%;}
    #card_list li{width:100%;}
    .sidebar .nav {margin-bottom:30px;}
    #card_report {margin: 0 auto;}
    #card_report .e-card{margin-bottom:15px;}
    .e-grid .e-headercelldiv {
        font-size: 10px !important;
    }

    .e-grid .e-rowcell {
        font-size: 10px !important;
    } 
}