/* GENERAL CSS START */

body{
    background-color: #E4EAEC !important;
    font-family: "Open Sans" , sans-serif;
    position: relative;
}

.datepicker-container{
    z-index: 99999 !important;
}

.ha_box_shadow{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.30);
}

.material-btn-icon-primary .fas {
    margin-right: 10px;
    background-color: #0D5EA3;
    padding: 10px 14px;
}

.material-btn-icon-success .fas {
    margin-right: 10px;
    background-color: #16A356;
    padding: 10px 14px;
}

.material-btn-icon-primary .far {
    margin-right: 10px;
    background-color: #0D5EA3;
    padding: 10px 14px;
}

.material-btn-icon-success .far {
    margin-right: 10px;
    background-color: #16A356;
    padding: 10px 14px;
}

.material-btn-icon-success .far {
    margin-right: 10px;
    background-color: #16A356;
    padding: 10px 14px;
}

.material-btn-icon-info .fas{
    margin-right: 10px;
    background-color: #c0750c;
    padding: 10px 14px;
}
.material-btn-icon-info .far{
    margin-right: 10px;
    background-color: #c0750c;
    padding: 10px 14px;
}

.material-btn-icon-danger .fas {
    margin-right: 10px;
    background-color: #EE3F2E;
    padding: 10px 14px;
}

.material-btn-icon-danger .far {
    margin-right: 10px;
    background-color: #EE3F2E;
    padding: 10px 14px;
}

.succes-btn-active{
    background-color: #22ac22;
    border-color: #22ac22;
}

.material-btn {
    border: 0px;
    /*margin-top: 15px;*/
    float: right;
}

small{
    font-size: 14px;
    color: #EE3F2E;
}

.phone-form-group button{
    padding: 0px 0px 0px 0px !important;
}

.phone-form-group button i{
    margin-right: 0px !important;
}

.material-btn-icon-success, .material-btn-icon-primary , .material-btn-icon-info, .material-btn-icon-danger{
    padding: 0px 15px 0px 0px !important;
    margin-bottom: 5px;
}

.idk_data_icon_remove .far, .idk_data_icon_see .far{
    font-size: 20px;
    padding: 10px 0;
}

.idk_data_icon_remove:hover .far{
    color: #DA6053;
}

.idk_data_icon_remove .fas, .idk_data_icon_see .fas{
    font-size: 20px;
}

.idk_data_icon_remove:hover .fas{
    color: #DA6053;
}

/* GENERAL CSS END */

/* MODAL CSS START */

.modal-header{
    border-bottom: 0px;
}

.modal-body{
    color: #7A7B7C;
}

#modal_close_btn{
    background-color: transparent !important;
    color: #8F9597 !important;
    border: none !important;
}
.modal-footer{
    background-color: #EBF1F3;
}
/* MODAL CSS END */

/* FORM CSS START */

.idk_content_form{
    background-color: white;
    margin: 0px 10px 10px;
    /* padding: 20px; */
}

.idk_content_form form{
    width: 100%;
    position: relative;
}

.idk_content_form form .form-group{
    padding: 25px;
    border-bottom: 2px solid #F6F7F6;
    margin: 0px;
}

.idk_content_form form .form-group label{
    color: #AAADAD;
}

.idk_content_form form .form-group input::placeholder{
    color: #AAADAD;
}

.idk_content_form form .btn-form-group{
    padding: 20px;
    background-color: #EBF1F3;
}

.idk_content_form form .idk_form_submit_button{
    background-color: #358BD1;
    color: white;
    font-size: 14px;
    float: right;
    transition: .3s ease-in-out;
}

.idk_content_form form .idk_form_submit_button:hover{
    background-color: #2170B3;
}

/* FROM CSS END */

/* LOGIN PAGE CSS START */

.ha_login_box{
    width: 100%;
    max-width: 500px;
    margin: 150px auto 0 auto;
    background: white;
}

.ha_login_box .ha_form_logo{
    background: -moz-linear-gradient(315deg, rgba(13,94,163,1) 0%, rgba(100,178,245,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(13,94,163,1)), color-stop(100%, rgba(100,178,245,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(315deg, rgba(13,94,163,1) 0%, rgba(100,178,245,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(315deg, rgba(13,94,163,1) 0%, rgba(100,178,245,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(315deg, rgba(13,94,163,1) 0%, rgba(100,178,245,1) 100%); /* ie10+ */
    background: linear-gradient(135deg, rgba(13,94,163,1) 0%, rgba(100,178,245,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0D5EA3', endColorstr='#64B2F5',GradientType=0 ); /* ie6-9 */
    height: 150px;
    text-align: center;
    position: relative;
}

.ha_login_box .ha_form_logo img{
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 0px 10px;
    max-width: 100%;
    width: 60%;
}

.ha_login_box .ha_form_container{
    padding: 30px 25px 30px 25px;
    border-bottom: 2px solid #64b2f5;
}

.ha_login_box .ha_form_container .ha_form_header h3{
    font-size: 18px;
    font-weight: 300;
    margin: 0px 0px 25px 0px;
    padding: 10px 15px;
    border-left: 2px solid #64B2F5;
}

.ha_login_box .ha_form_container form .form-group input{
    padding: 15px 10px;
    height: auto;
}

.ha_login_box .ha_form_container form .ha_login_button{
    margin-top: 15px;
}

/* LOGIN PAGE CSS END */

/* DASHBOARD CSS START */

.idk_content_header{
    padding-top: 20px;
    margin-bottom: 15px;
}

.idk_content_header h2{
    font-size: 24px;
}

.idk_content_header h2 i{
    font-size: 30px;
    margin-right: 5px;
}


.idk_connections_table{
    margin-bottom: 10px;
}

.idk_num_statistics{
    margin-top: 20px;
}

.idk_statistic_box_content{
    background-color: white;
    padding: 15px;
    height: 100%;
}

.idk_statistic_box_content .idk_statistic_box_header h3{
    font-size: 19px;
    color: #76797C;
}

.idk_statistic_box_content .idk_statistic_box_body{
    margin: 5px;
}

.idk_statistic_box_content .idk_statistic_box_body h3{
    font-size: 26px;
}

.idk_statistic_box_content .idk_statistic_box_footer a{
    color: #76797C; 
    text-decoration: none;
}

.idk_statistic_box_content .idk_statistic_box_footer a i{
    margin-left: 3px;
    transition: .2s ease-in-out;
}

.idk_statistic_box_content .idk_statistic_box_footer a:hover i{
    margin-left: 7px;
}


/* DASHBOARD CSS END */

/* NAVIGATION CSS START */

.idk_active{
    border-left: 3px solid white !important;
}

.idk_active a{
    color: white !important;
}

.idk_navigation{
    width: 250px;
    height: 100vh;
    background: -moz-linear-gradient(269deg, rgba(52,63,75,1) 0%, rgba(63,77,90,1) 99%, rgba(63,77,90,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(52,63,75,1)), color-stop(99%, rgba(63,77,90,1)), color-stop(100%, rgba(63,77,90,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(269deg, rgba(52,63,75,1) 0%, rgba(63,77,90,1) 99%, rgba(63,77,90,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(269deg, rgba(52,63,75,1) 0%, rgba(63,77,90,1) 99%, rgba(63,77,90,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(269deg, rgba(52,63,75,1) 0%, rgba(63,77,90,1) 99%, rgba(63,77,90,1) 100%); /* ie10+ */
    background: linear-gradient(181deg, rgba(52,63,75,1) 0%, rgba(63,77,90,1) 99%, rgba(63,77,90,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343F4B', endColorstr='#3F4D5A',GradientType=0 ); /* ie6-9 */
    float: left;
    display: block;
    position: fixed;
    overflow: hidden;
}

.idk_content{
    margin-left: 250px;
    min-height: 100%;
}

.idk_navigation_header{
    height: 60px;
    background-color: white;
    text-align: center;
    position: relative;
}

.idk_navigation .idk_navigation_header img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.idk_navigation .idk_navigation_avatar .idk_avatar_holder{
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.idk_navigation .idk_navigation_avatar .idk_avatar_holder img{
    max-width: 40%;
}

.idk_navigation .idk_navigation_avatar .idk_avatar_holder .idk_user_option{
    padding: 6px 7px;
    display: inline-block;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    right: 62px;
}

.idk_navigation .idk_navigation_avatar .idk_avatar_holder .idk_user_option a{
    color: #8CA4AF;
}

.idk_navigation .idk_navigation_avatar .idk_avatar_holder .idk_user_option i{
    font-size: 18px;
    position: relative;
    top: 1px;
}

.idk_navigation ul{
    padding: 0;
    list-style: none;
}

.idk_navigation ul li{
    padding: 12px 0;
    border-left: 3px solid transparent;
    transition: .3s linear;
}

.idk_navigation ul li a{
    display: block;
    color: #C6CFDB;
    margin-left: 25px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.idk_navigation ul li a i{
    margin-right: 6px;
    font-size: 20px;
}

.idk_navigation li:hover{
     border-left: 3px solid white !important;
}

.idk_navigation li:hover a{
    color: white !important;
}

header{
    background-color: white;
    height: 60px;
    position: relative
}

header div{
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    padding-left: 15px;
}

header div h2{
    font-size: 22px;
    margin: 0;
}


header div a{
    display: block;
    color: black;
    margin-left: 25px;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.7px;
}

header div a i{
    margin-right: 6px;
    font-size: 20px;
}


@media screen and (max-width: 970px) {
    .idk_navigation {
        width: 40px !important;
    }

    .idk_content{
        margin-left: 40px !important;
    }

    .idk_navigation ul li{
        text-align: center;
    }

    .idk_navigation ul li a span{
        display: none;
    }

    .idk_navigation ul li a {
        margin-left: 0px;
    }

    .idk_navigation ul li a i {
        font-size: 16px;
    }

    .idk_active {
        border-left: 2px solid white !important;
    }

    .idk_navigation .idk_navigation_header{
        height: 60px;
        background-color: #1F262D;
    }

    .idk_navigation .idk_navigation_header h2 {
        display: none;
    }
}
/* NAVIGATION CSS END */

/* DATATABLE CSS START */

.datatable-filter-dropdown button{
    background-color: #D9DEE0;
    border-color: transparent !important;
}

.datatable-filter-dropdown button:hover{
    background-color: #DADEE0;
    border-color: transparent !important;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    background-color: #DADEE0 !important;
    boreder-color: transparent !important;
}

.datatable-filter-dropdown button:after{
    color: #7A7E80;
}

.datatable-filter-dropdown i{
    color: #7A7E80;
}
.btn-group, .btn-group-vertical {
    display: block;
}

.row_selected{
    color: white !important;
    background-color: #68C368 !important;
}

.connections_table_container{
    background-color: white;
    position: relative;
}

.connections_table_overlay:after{
    content: "";
    position: absolute;
    z-index: 10;
    background-color: rgba(0,0,0,.6) !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0px 0px 10px 10px;
}

#connections_table{
    border: none;
    border-radius: 0px 0px 10px 10px;
}

#connections_table .label{
    font-size: 12px;
}

#connections_table label{
    top: -13px;
}

#connections_table thead tr th{
    border: none;
    text-transform: uppercase;
    font-size: 14px;
    color: #9CA2A4;
    background-color:  #EBF1F3;
    padding: 10px auto;
    text-align: center;
    vertical-align: middle;
    border-top: 2px solid #E3E6E7;
    border-bottom: 2px solid #E3E6E7;
}

#connections_table tbody tr{
    background-color: white;
    padding: 20px 10px;
    border-color: #F3F5F7;
    border-left: none;
    vertical-align: middle;
    border-right: none;
    text-align: center;
    transition: .3s ease-in-out;
}

#connections_table tbody tr td{
    vertical-align: middle;
}

#connections_table_wrapper>.row:first-child{
     padding: 10px;
     padding-bottom: 0px;
}

#connections_table_wrapper>.row:last-child{
    border-top: 2px solid #E3E6E7;
    padding: 10px;
}

#loading_spinner{
    width: 100px;
}

#connections_table_wrapper>.row:last-child{
    background-color: transparent !important;
}

.idk_spinner_container{
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 9999;
    position: absolute;
}

.idk_table_checkbox label{
    cursor: pointer;
}

.phone-numbers-list{
    list-style: none;
    text-align: left;
    padding: 0;
}

#add_connection_button{
    float: right;
}

@media screen and (max-width: 852px) {
    #add_connection_button{
        float: left;
    }
}
/* DATATABLE CSS END */

/* CALENDAR CSS START */

.idk_calendar_wrap{
    margin-top: 20px;
    background-color: white;
}

.fc-toolbar.fc-header-toolbar{
    padding: 10px 10px 0px;
}

.fc-center{
    text-transform: capitalize;
}

.fc-content{
    color: white;
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    .fc-center{
        margin-top: 10px;
    }
}

@media screen and (max-width: 503px) {
    .fc-center{
        margin-top: 10px;
        font-size: 22px;
    }

    .fc-toolbar .fc-left{
        float: none !important;
        text-align: center !important;
        margin: auto !important;
    }

    .fc-toolbar .fc-right {
        float: none !important;
        margin-top: 10px;
    }

    .fc .fc-toolbar>*>* {
        float: none !important;
    }

    .fc-today-button{
        position: relative;
        margin-top: 10px !important;
        margin-right: 10px !important;
    }
}

/* CALENDAR CSS END */

/* GRADOVI PAGE CSS START */

.idk_tab{
    padding: 15px;
    background-color: white;
    margin: 0px 0px 5px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.idk_tab .idk_del_holder{
    float: left;
    margin-right: 10px;
}

.idk_tab .idk_del_holder label{
    margin: 0px;
}

.idk_tab a{
    text-decoration: none;
}

.idk_tab a:hover{
    text-decoration: none;
}

.idk_tab h2{
    float: left;
    padding: 0px;
    margin: 0px;
    font-size: 21px;
}

.idk_tab form{
    display: inline-block;
}

.idk_tab button{
    background-color: transparent;
    border: none;
    outline: none;
}

.idk_option_icons{
    font-size: 22px;
    padding: 0px 7px;
    cursor: pointer;
    color: #BCBEBF;
    transition: .3s linear;
}

.idk_sub_tab{
    margin-left: auto;
    width: 95%;
}

.idk_sub_tab .idk_del_holder{
    float: left;
    margin-right: 10px;
}

.idk_sub_tab .idk_del_holder label{
    margin: 0px;
}

.idk_sub_tab a{
    text-decoration: none;
}

.idk_sub_tab a:hover{
    text-decoration: none;
}

.idk_sub_tab h2{
    float: left;
    padding: 0px;
    margin: 0px;
    font-size: 21px;
}

.idk_sub_tab form{
    display: inline-block;
}

.idk_sub_tab button{
    background-color: transparent;
    border: none;
}

.idk_option_icons{
    font-size: 22px;
    padding: 0px 7px;
    cursor: pointer;
    color: #BCBEBF;
    transition: .3s linear;
}

.idk_extra_option_buttons{
    padding: 15px;
}

.idk_extra_option_buttons #idk_remove_multiple{
    float: left;
    margin-right: 10px;
}

.idk_extra_option_buttons #idk_check_all{
    float: left;
}

#idk_see_icon:hover{
    color: #64B2F5;
}

#idk_delete_icon:hover{
    color: #DA6053;
}

/* GRADOVI PAGE CSS END */