/** Input style **/
.input-style {
    display: block;
    border-radius: 0.375rem;
    border-width: 1px;
    width: 100%;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 40px;
    padding: 10px;
}

.has-buttons input[type=number].square-ui-input::-webkit-inner-spin-button,
.has-buttons input[type=number].square-ui-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.has-buttons input[type=number].square-ui-input {
    padding: 0 50px;
    text-align: center;
}

.has-buttons input[type=number].square-ui-input:focus{
    border-color: #22B9C3;
}

@media (min-width: 640px) {
    .input-style {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

/** Editor style **/
.ck-editor h1, .ck-editor h2, .ck-editor h3, .ck-editor h4, .ck-editor h5, .ck-editor h6 {font-weight: bold}
.ck-editor h1 {font-size: 1.8rem;}
.ck-editor h2 {font-size: 1.5rem;}
.ck-editor h3 {font-size: 1.4rem;}
.ck-editor h4 {font-size: 1.3rem;}
.ck-editor h5 {font-size: 1.2rem;}
.ck-editor h6 {font-size: 1.1rem;}
.ck-editor a {text-decoration: underline !important;}

/** Html content **/
.html_content ol, .html_content ul:not(.todo-list) {display: block !important;list-style-type: decimal !important;margin-block-start: 1em !important;margin-block-end: 1em !important;margin-inline-start: 0 !important;margin-inline-end: 0 !important;padding-inline-start: 40px !important;}
.html_content ol {list-style-type: decimal !important;}
.html_content ol ol {list-style-type: lower-alpha !important;}
.html_content ul:not(.todo-list):not(.ck-list) {list-style-type: disc !important;}
.html_content ul:not(.todo-list):not(.ck-list) ul {list-style-type: circle !important;}
.html_content a {color: #1d68cd;text-decoration: underline;}
.html_content blockquote {padding: 1rem 2rem;border-left: 2px solid #ccc;}
.html_content table {width: 100%;}
.html_content table th, .html_content table td {border: 1px solid #ddd;}
.html_content .marker-yellow {background-color: yellow;}
.html_content .marker-green {background-color: lime;}
.html_content .marker-pink {background-color: hotpink;}
.html_content .marker-blue {background-color: cornflowerblue;}
.html_content .pen-red {background-color: transparent;color: red;}
.html_content .pen-green {background-color: transparent;color: green;}
.html_content figure.media {width: 100%;margin-bottom: 2rem;}
.html_content .todo-list__label input:checked ~ span {text-decoration: line-through;}
.html_content .todo-list__label span {margin-left: 1rem;}
.html_content hr {width: 100% !important;}

/** File upload **/
.file_upload{cursor: pointer;}
.file_upload input::file-selector-button {float:right;margin-top: -5px;background: #e1e1e1;border: 1px solid #ccc; padding: .25rem .5rem; cursor: pointer; transition: all .25s ease-in-out;}
.file_upload input:hover::file-selector-button {background: #ccc;}

/** Datatable **/
.id_col, .actions_col{
    width: 0;
}
[id^=datatable-] .shadow {
    box-shadow: none !important;
}
[id^=datatable-] table {
    border-spacing: 0 5px;
    border-collapse: separate;
}
[id^=datatable-] table > thead {
    background: transparent;
}
[id^=datatable-] table > thead th {
    background: transparent;
}
[id^=datatable-] table > thead .uppercase {
    text-transform: unset;
    font-weight: initial;
    font-size: 13px;
    color: #333;
}
[id^=datatable-] table > tbody > tr:hover > td {
    background: #e2e8f0;
}
[id^=datatable-] table > tbody > tr > td {
    background: #fff;
}
[id^=datatable-] table > tbody > tr > td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
[id^=datatable-] table > tbody > tr > td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
[id^=datatable-] table > tfoot tr {
    background: transparent !important;
}
[id^=datatable-] table > tfoot tr td {
    background: transparent !important;
}