/*
Template Name: Admin pro Admin
Author: Wrappixel
Email: niravjoshi87@gmail.com
File: scss
*/

@import '../variable';

/*******************
Custom-select
******************/

.custom-select {
    background: url(../../assets/images/custom-select.png) right .75rem center no-repeat;
}


/*******************
textarea
******************/

textarea {
    resize: none;
}


/*******************
Form-control
******************/

.form-control {
    color: $bodytext;
    min-height: 38px;
    display: initial;
}

.form-control-sm {
    min-height: 20px;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 0.7;
}

.custom-control-input:focus~.custom-control-indicator {
    box-shadow: none;
}

.custom-control-input:checked~.custom-control-indicator {
    background-color: $success;
}

form label {
    font-weight: 400;
}

.form-group {
    margin-bottom: 25px;
}

.form-horizontal label {
    margin-bottom: 0px;
}

.form-control-static {
    padding-top: 0px;
}

.form-bordered .form-group {
    border-bottom: 1px solid $border;
    padding-bottom: 20px;
}


/*******************
Form Dropzone
******************/

.dropzone {
    border: 1px dashed $form-brd;
    .dz-message {
        padding: 5% 0;
        margin: 0px;
    }
}


/*******************
Form Pickers
******************/

.asColorPicker-dropdown {
    max-width: 260px;
}

.asColorPicker-trigger {
    position: absolute;
    top: 0;
    right: -35px;
    height: 38px;
    width: 37px;
    border: 0;
}

.asColorPicker-clear {
    display: none;
    position: absolute;
    top: 5px;
    right: 10px;
    text-decoration: none;
}

table th {
    font-weight: 400;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: $themecolor;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background: $themecolor;
    color: $white;
}

.datepicker td,
.datepicker th {
    padding: 5px 10px;
}


/*******************
Form summernote
******************/

.note-popover,
.note-icon-caret {
    display: none;
}

.note-editor.note-frame {
    border: 1px solid $form-brd;
    .panel-heading {
        padding: 6px 10px 10px;
        border-bottom: 1px solid $border;
    }
}

.label {
    display: inline-block;
}


/*============================================================== 
Form addons page
============================================================== */


/*Bootstrap select*/

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select {
    .dropdown-menu {
        li a {
            display: block;
            padding: 7px 20px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: $bodytext;
            white-space: nowrap;
            &:hover,
            &:focus {
                color: $themecolor;
                background: $light;
            }
        }
    }
    .show>.dropdown-menu {
        display: block;
    }
}

.bootstrap-touchspin .input-group-btn-vertical>.btn {
    padding: 9px 10px;
}

.select2-container--default {
    .select2-selection--single {
        border-color: $form-brd;
        height: 38px;
        .select2-selection__rendered {
            line-height: 38px;
        }
        .select2-selection__arrow {
            height: 33px;
        }
    }
    .select2-selection--multiple {
        .select2-selection__choice__remove{
            float: $rgt;
            color:$white;
            margin-right: 0px;
            margin-left: 4px;
        }
        .select2-selection__choice{
            background: $themecolor;
            color:$white;
            border-color:$themecolor;    
        }
    }
}    

.input-form .btn {
  padding: 8px 12px;
}


/*============================================================== 
Form Material page
 ============================================================== */


/*Material inputs*/

.form-material .form-group {
    overflow: hidden;
}

.form-material .form-control {
    background-color: rgba(0, 0, 0, 0);
    background-position: center bottom, center calc(100% - 1px);
    background-repeat: no-repeat;
    background-size: 0 2px, 100% 1px;
    padding: 0;
    transition: background 0s ease-out 0s;
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
    background-image: linear-gradient($themecolor, $themecolor), linear-gradient($light, $light);
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    float: none;
}

.form-material .form-control.focus,
.form-material .form-control:focus {
    background-size: 100% 2px, 100% 1px;
    outline: 0 none;
    transition-duration: 0.3s;
}

.form-control-line .form-group {
    overflow: hidden;
}

.form-control-line .form-control {
    border: 0px;
    border-radius: 0px;
    padding-left: 0px;
    border-bottom: 1px solid #f6f9ff;
    &:focus {
        border-bottom: 1px solid $themecolor;
    }
}


/*******************
Form validation error 
******************/

.error .help-block {
    color: $red;
}


/*******************
File Upload 
******************/

.fileupload {
    overflow: hidden;
    position: relative;
    input.upload {
        cursor: pointer;
        filter: alpha(opacity=0);
        font-size: 20px;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
}

.scale-up{ 
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
    display:inline-block;
    transform-origin: right 0px;
}
.scale-up-left{ 
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
    display:inline-block;
    transform-origin: left 0px;
}
.show>.scale-up{
  transform: scale(1);
  transform-origin: right 0px;
}
.show>.scale-up-left{
    transform: scale(1);
  transform-origin: left 0px;
}

.page-titles .justify-content-end:last-child .d-flex{
  margin-right:10px;
}
.btn-circle.right-side-toggle{
  position:fixed;
  bottom:20px;
  right:20px;
  padding:25px;
  z-index:10;
}

/*Form Validation*/
.help-block ul{
    padding: 0px;
    margin: 0px;
    li{
        list-style: none;
    }
}
.error .form-control{
    border-color:$danger;
}
.validate .form-control{
    border-color:$success;
}