@font-face {
    font-family: "Ubuntu";
    src: url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-Regular.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-BoldItalic.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-Italic.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-Light.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-LightItalic.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-Medium.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-MediumItalic.ttf") format('truetype'), url("../assets/vendors/base/fonts/Ubuntu/Ubuntu-Bold.ttf") format('truetype');
}

@font-face {
    font-family: "DroidKufi-Regular";
    src: url("../assets/vendors/base/fonts/Ubuntu/secondfont/DroidKufi-Regular.woff") format('woff');
}

@font-face {
    font-family: 'Al-Jazeera-Arabic-Regular';
    src: url('../assets/vendors/base/fonts/AlJazeeraArabicRegular/Al-Jazeera-Arabic-Regular.eot?#iefix') format('embedded-opentype'), url('../assets/vendors/base/fonts/AlJazeeraArabicRegular/Al-Jazeera-Arabic-Regular.woff') format('woff'), url('../assets/vendors/base/fonts/AlJazeeraArabicRegular/Al-Jazeera-Arabic-Regular.ttf') format('truetype'), url('../assets/vendors/base/fonts/AlJazeeraArabicRegular/Al-Jazeera-Arabic-Regular.svg#Al-Jazeera-Arabic-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'Ubuntu' !important;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


.hidden {
    display: none !important;
}



.table thead th {
    font-weight: bold !important;
}

.m-subheader .m-subheader__title {
    font-family: Ubuntu !important;
    font-weight: 300 !important;
}


/*
    TABLE MOBILE RESPONSIVE
*/

@media only screen and (max-width: 800px) {
    /* Force table to not be like tables anymore */
    #no-more-tables table,
    #no-more-tables thead,
    #no-more-tables tbody,
    #no-more-tables th,
    #no-more-tables td,
    #no-more-tables tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        #no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
        display: inline-block !important;
        width: 48%;
    }

        #no-more-tables td:after {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

    #no-more-tables .dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
        display: none;
    }

    /*
Label the data
*/
    #no-more-tables td:after {
        content: attr(data-title);
    }


    .hide_table_menu_item {
        display: none;
    }
}

/*
    END
*/


.cstpl_image_prev {
    width: 100%;
}

    .cstpl_image_prev img {
        width: 100px;
        height: 100px;
    }


/**
    IMAGE GALLARY
    **/

.gallary_container_image {
    width: 100px;
    height: 100px;
}

.gallary_container {
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
    overflow-y: scroll;
    display: inline-table;
    vertical-align: middle;
}

.gallary_container_elemet {
    display: inline-block;
    margin: 5px;
    position: relative;
}

    .gallary_container_elemet img {
        width: 100px;
        height: 100px;
    }

.gallary_container_elemet_overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    text-align: center;
    left: 0;
    padding: 1px 0px 2px 0px;
}

.gallary_container_elemet:hover .gallary_container_elemet_overlay {
    opacity: 1;
}

.gallary_container_elemet_overlay_selected {
    box-shadow: 0px 0px 0px 3px rgba(0,128,0,1);
}
/**
    END
**/






/**
    VIDEOS GALLARY
    **/


.gallary_video_container {
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
    overflow-y: scroll;
    display: inline-table;
    vertical-align: middle;
}

.gallary_video_container_elemet {
    display: inline-block;
    margin: 5px;
    position: relative;
}

    .gallary_video_container_elemet video {
        width: 100px;
        height: 100px;
    }

.gallary_video_container_elemet_overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    text-align: center;
    left: 0;
    padding: 1px 0px 2px 0px;
}

.gallary_video_container_elemet:hover .gallary_video_container_elemet_overlay {
    opacity: 1;
}

.gallary_video_container_elemet_overlay_selected {
    box-shadow: 0px 0px 0px 3px rgba(0,128,0,1);
}


/**
    END
**/



/**
    FILE UPLOAD BUTTON
 **/

.file_upload_hide {
    display: none;
}

.file_upload_hide_lable {
}

/**
    END
 **/

.modal {
    overflow: auto !important;
}



/*
    youtube design
*/
.youtube-prev-iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}
/*
    end
*/



/*
    2019 march 25
    row heigth,column width, screen height, column width design
*/
.screen_table_top {
    position: relative;
    float: right;
    right: 63px;
}

.screen_table_left {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    left: -40px;
    position: absolute;
    top: 80px;
}

.screen_table_middle {
    width: 90%;
    text-align: center;
}

    .screen_table_middle table {
        margin-left: 18px;
    }

.screen_table_rigth {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    right: 0px;
    position: absolute;
    top: 80px;
}

.screen_table_bottom {
    text-align: center;
}



.cstpl-m-btn--custom {
    padding: 0.75rem 0.75rem !important;
}




.dropzone .dz-preview .dz-error-message {
    top: 148px;
}


#show_hide_table_footer_preview_content_row {
    margin-top: 4rem;
}


.rotatingtext_image {
    font-family: 'Al-Jazeera-Arabic-Regular' !important;
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    .screen_table_rigth {
        right: 0px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .screen_table_rigth {
        right: -16px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .screen_table_top {
        right: 11px;
    }

    .screen_table_rigth {
        right: -36px;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}