/*.btmodal_container */


.btmodal_container .btn-gdrive, .btmodal_container .btn-dropbox {
	background-color: #e8ecef !important;
	background-repeat: no-repeat !important;
	background-position: left 0.75rem center !important;
	background-size: 26px 22px !important;
	border: 1px solid #ced4da !important;

	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #212529 !important;
	text-align: right !important;
	text-decoration: none !important;
	vertical-align: middle !important;
}
.btmodal_container .btn-gdrive {
	background: #e8ecef url('https://www.agcareers.com/gdapi_package/images/Google_Drive_icon.png');
}
.btmodal_container .btn-dropbox {
	background: #e8ecef url('https://www.agcareers.com/gdapi_package/images/dropbox_icon.png');
}
.btmodal_container .pos-px-4 {
	padding-right: 1rem!important;
	padding-left: 2.8rem!important;
}

.btmodal_container .btn-onoff {
	color: #212529 !important;
	background-color: #9bebc6 !important;
	border-color: #ced4da !important;

	background: #9bebc6 url('https://www.agcareers.com/gdapi_package/images/Google_Drive_icon.png');
    background-repeat: no-repeat;
    background-position: left 0.5rem center;
    background-size: 22px 17px;
    font-size: 12px !important;
	padding-right: 0.5rem!important;
    padding-left: 2.2rem!important;
}

.btmodal_container .clscenter { text-align:center; }

/*----------------------------- START POPUP MODAL WINDOW --------------------------------*/
/*  widget tab */
	.btmodal_container div.wdgt-tab-container{
	  z-index: 10;
	  background-color: #ffffff;
	  padding: 0 !important;
	  border-radius: 4px;
	  -moz-border-radius: 4px;
	  border:none;
	  margin-top: 0px;
	  margin-left: 0px;
	  background-clip: padding-box;
	  opacity: 0.97;
	  filter: alpha(opacity=97);
	  width: 100%;
	  height: 490px;
	}
	.btmodal_container div.wdgt-tab-menu{
	  padding-right: 0;
	  padding-left: 0;
	  padding-bottom: 0;
	  width: 10%;
	  float: left;
	  height: 490px;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group{
	  margin-bottom: 0;
	  width: 100%;
	  min-width: 70px;
	  height: 100%;
	  border:none;
	  background-color: rgba(0,0,0,.125);
	  border-bottom-left-radius: 0.25rem;
	  border-top-left-radius: 0.25rem;
	  border-bottom-right-radius: 0rem;
	  border-top-right-radius: 0rem;
	}
	.btmodal_container div.wdgt-tab{
		float: right;
		width: 90%;
		max-width: calc(100% - 70px);
		height:100%;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a{
	  margin-bottom: 0; width:100%;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a .glyphicon,
	.btmodal_container div.wdgt-tab-menu div.list-group>a .fa {
	  color: #5A55A3;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a:first-child{
	  border-top-right-radius: 0;
	  -moz-border-top-right-radius: 0;
	  border-top-left-radius: 4px;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a:last-child{
	  border-bottom-right-radius: 0;
	  -moz-border-bottom-right-radius: 0;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a.active,
	.btmodal_container div.wdgt-tab-menu div.list-group>a.active .glyphicon,
	.btmodal_container div.wdgt-tab-menu div.list-group>a.active .fa{
	  background-color: #bfa7ea !important;
	  color: #ffffff !important;
	}
	.btmodal_container div.wdgt-tab-menu div.list-group>a.active:after{
	  content: '';
	  position: absolute;
	  left: 100%;
	  top: 50%;
	  margin-top: -13px;
	  border-left: 0;
	  border-bottom: 13px solid transparent;
	  border-top: 13px solid transparent;
	  border-left: 10px solid #bfa7ea;
	}

	.btmodal_container div.wdgt-tab-content{
	  padding-top: 0px;
	  height: 490px;
	  margin-top: 0px;
	}

	.btmodal_container div.wdgt-tab div.wdgt-tab-content:not(.active){
	  display: none;
	}

	.btmodal_container .localfiles_icon, .btmodal_container .cls_gd_icon, .btmodal_container .cls_db_icon {
		-ms-flex-negative: 0 !important;
		flex-shrink: 0 !important;
		background-repeat: no-repeat !important;
		background-position: 50% 50%, center !important;
		background-size: 32px 26px !important;
    	padding: 0px 30px 0px 30px;
	}
	.btmodal_container svg.localfiles_icon:after {
		content: 'Local Files';
	}
	.btmodal_container svg.cls_gd_icon:after {
		content: 'Google Drive';
	}
	.btmodal_container svg.cls_db_icon:after {
		content: 'Dropbox';
	}

	.btmodal_container .localfiles_icon {
		background: url('https://www.agcareers.com/gdapi_package/images/pc_icon.png');
	}

	.btmodal_container .cls_gd_icon {
		background: url('https://www.agcareers.com/gdapi_package/images/Google_Drive_icon.png');
	}

	.btmodal_container .cls_db_icon {
		background: url('https://www.agcareers.com/gdapi_package/images/dropbox_icon.png');
	}

	.btmodal_container .icon_pos{
		background-position: 50% 50%, center;
	}

	.btmodal_container .list-group-item {
	  	padding: 0.5rem 0rem;
	  	font-size: 10px !important;
	    position: relative;
	    display: block;
	    color: #212529;
	    text-decoration: none;
	    background-color: #fff;
	    border: 1px solid rgba(0,0,0,.125);
	    border-top:none;
	 }
	.btmodal_container .extraspace { height: calc(490px - 180px); opacity: 0;}
	.btmodal_container .cls_spacing { padding: 15px 0px;}

	.btmodal_container .modal {
		z-index: 1055 !important;
	    position: fixed;
	    outline: 0;
	    vertical-align: middle;
	    overflow: inherit !important;
	    display: none;
		width: 700px;
	    height: 100%;
	    max-width: calc(100% - 80px);
	    max-height: calc(100% - 80px);
	    top: 50%;
	    left: 49%;
	    transform: translate(-50%,-50%) !important;
	    -ms-transform: translate(-50%,-50%) !important;
	    -webkit-transform: translate(-50%,-50%) !important;
	}

	.btmodal_container .wdgt-modal-body {
		position: relative;
		flex: 1 1 auto;
		padding: 0px 0px;
		line-height: normal;
		height: 490px;
	}

	.btmodal_container .btn-close {
		margin: 0;
	    position: absolute;
	    top: -13px;
	    right: -20px;
	    width: 30px;
	    height: 30px;
	    border-radius: 31px;
	    background-image: none;
	    background-color: green;
	    color: #fff;
	    font-size: 18px;
	    opacity: 6.5;
	    z-index: 999;
	    cursor:pointer;
	}

	.btmodal_container .modal-dialog{
		flex-shrink: 0;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 490px;
		border:none;
		border-radius: 4px;
		background: #fff;
		color: #353535;
	}

	.btmodal_container .row {
      --bs-gutter-x: 0.5rem !important;
	}
	.btmodal_container .wdgt-modal-content { border:none !important; }
	.btmodal_container .list-group-item.active {border:none !important; }
	.btmodal_container .muted{ padding : 10px 0px !important; text-align: center !important; margin-top: 0; margin-bottom: 1rem; line-height: 17px; font-size: 13px;}
	.btmodal_container .fade { opacity: 1; }
	.btmodal_container h4 {font-size: 24px; }
	.btmodal_container h6 { font-size: 13px; line-height: 17px; }

	.btmodal_container .cls_picker_result{ }
	.btmodal_container .result-container { margin : 0px 0px 0px 0px;}
	/* START - dropbox tab */
	.btmodal_container .responsive-iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    width: 98%;
	    height: 100%;
	    left: 10px;
	}
	/* END - dropbox tab */
/*------------------------------- END POPUP MODAL WINDOW ------------------------------------------*/

/*------------------------------- START MOBILE RESPONSIVE CSS -------------------------------------*/
@media screen and (max-width : 480px) {

	.btmodal_container div.wdgt-tab-menu div.list-group>a.active:after {
		content: '';
		position: absolute;
		left: 36%;
		top: 120%;
		border-left: 13px solid transparent;
		border-right: 13px solid transparent;
		border-top: 13px solid #bfa7ea;
		clear: both;
	}

	.btmodal_container div.wdgt-tab-menu div.list-group {
		margin-bottom: 0;
		height: 50px;
		border:none;
		float: left;
		flex: 0 0 auto;
		width: 100%;
	}

	.btmodal_container .list-group {
		display: flex !important;
		flex-direction: row !important;
		padding-left: 0 !important;
		margin-bottom: 0 !important;
		border-radius: 0rem !important;
	}

	.btmodal_container .modal-dialog {
	  	height: 600px !important;
	  	margin: 0px 0px !important;
	}

	.btmodal_container .modal.fade .modal-dialog {
	    -webkit-transition: -webkit-transform .3s ease-out;
	    -o-transition: -o-transform .3s ease-out;
	    transition: transform .3s ease-out;
	    -webkit-transform: translate3d(0,0%,0);
	    -o-transform: translate3d(0,0%,0);
	    transform: translate3d(0,0%,0);
	}

	.btmodal_container div.wdgt-tab-container {
		height: 590px !important;
	}

	.btmodal_container .icon_pos{ background-position: 50% 50%, center !important;}
	.btmodal_container .list-group-item {padding: 0.25rem 1rem !important; border-right:none !important; border-top: 1px solid rgba(0,0,0,.125) !important;}
	.btmodal_container .extraspace { width: 100%; height: 50px; opacity: 0;}
	.btmodal_container div.wdgt-tab-menu { width: 100%; float: left;  height: 50px !important;}
	.btmodal_container div.wdgt-tab { float: none; width: 100%; max-width: 100% !important; height: auto !important; }
	.btmodal_container div.wdgt-tab-content {margin-top: 60px; height: 540px;}
	.btmodal_container .welcome-container, .btmodal_container .db-welcome-container {padding: 50px 5px 0px 5px !important;}
	.btmodal_container .upload-container:before {
		top: 0px !important;
	    left: 2%!important;
	    right: 0% !important;
	    width: 96% !important;
	    height: 526px !important;
	    border: 0.12em dashed green !important;
	 }
	 .btmodal_container .cls_filepreview { top: 4px !important;}
	.btmodal_container .upload-container, .btmodal_container .cls_filepreview,
	.btmodal_container .cls_picker_result, .btmodal_container .welcome, .btmodal_container .db-welcome { min-height: 96% !important; height: 520px !important;}
	.btmodal_container .modal-fullscreen-lg-down { height: 600px !important; }
	.btmodal_container .upload-container input {padding: 0px 0px 0px 0px !important; height: 530px !important;}
    .btmodal_container .cls_filselector {bottom: calc(100% - 260px) !important;}

	.btmodal_container .cls_tabfooter { margin-top: 10px !important;}
	.btmodal_container .cls_tabinfo{  margin-top: 0px !important; margin-right: 160px !important;}
	.btmodal_container .cls_tabheader { margin-top: 0px !important; }
	.btmodal_container .tab_content {
		margin: 35px 0px !important;
	 }

	 .btmodal_container .btn-close { top: 1px !important; right: 1px !important; }
	 .btmodal_container #sResult, .btmodal_container .cls_result {margin: 30px 0px !important;}
	 .btmodal_container .picker_loginpanel { right: 10px !important;  top:70px !important;}
	 .btmodal_container .modal {
	    width: 100% !important;
	    min-width : 300px !important;
	    min-height: 100% !important;
	    height: 600px !important;
	    max-width: 100% !important;
    	max-height: 100% !important;
	    left: 0px !important;
	    position: fixed !important;
	    top: 10px !important;
	    outline: 0;
	    vertical-align: middle;
	    overflow: inherit !important;
	    padding-right: 0 !important;
	    transform: translate(0, 0%) !important;
	    -ms-transform: translate(0, 0%) !important;
	    -webkit-transform: translate(0, 0%) !important;
	    margin: 0px auto !important;
		padding: 5px !important;
	}
	.btmodal_container .wdgt-modal-body {padding: 5px 5px !important;height: 600px !important;}
	.btmodal_container .modal-fullscreen-lg-down .wdgt-modal-content {border-radius: 4px !important; height: 600px !important;}
	.btmodal_container .row {
	     margin-right: calc(0.0 * var(--bs-gutter-x)) !important;
	     margin-left: calc(0.0 * var(--bs-gutter-x)) !important;
	     height: 100% !important;
	}
	.btmodal_container .cls_loginpanel{padding: 0px 2px 0px 0px !important;}
	.btmodal_container .display_image_div {
	    width: 193px !important;
	    height: 249px !important;
	}
	.btmodal_container .lb-image {
	    max-width: 181px !important;
	    max-height: 237px !important;
	}

	.btmodal_container .alert {
	    width: 92% !important;
	    top: 18px !important;
	    left: 12px !important;
	}

	.btmodal_container .gd_alert {
	    width: 92% !important;
	    top: 135px !important;
    	left: 12px !important;
	}

}

@media screen and (max-width: 480px) {
	 .btmodal_container .picker.modal-dialog {
	    max-width: 355px !important;
	 }
	 .btmodal_container .picker.modal-dialog-content.picker-dialog-content{
	     max-width: 355px !important;
	 }

	 .btmodal_container .picker-dialog-content {
	    width: 100% !important;
	    height: 450px !important;
	    min-height: 73vh !important;
	}

	.btmodal_container iframe.picker-dialog-frame {
	    width: 100% !important;
	    height: 535px !important;
	    border: 0 !important;
	    overflow: hidden !important;
	}

}
/*------------------------------- END MOBILE RESPONSIVE CSS -------------------------------------*/

/*--------------------------------- START DRAG AND DROP CSS -------------------------------------*/

	.btmodal_container .upload-container {
		position: relative;
		bottom: 0px;
		height: 490px;
		top: 0px;
	  }
	  .btmodal_container .upload-container input {
		border:none;
		background: #f1f1f1;
		outline: 2px dashed #92b0b3;
		outline-offset: -10px;
		padding: 50px 0px 0px 0px;
		text-align: center !important;
		width: 93%;
		height: 100%;
		background-color: yellow;
		cursor: pointer;
	  }
	  .btmodal_container .upload-container input:hover {
		background: #ddd;
	  }
	  .btmodal_container .upload-container:before {
		position: absolute;
		top: 10px;
		left: 2%;
		right: 2%;
		content: "Drag and Drop files here. (or) ";
		color: #3f8188;
		font-weight: 900;
		width: 96%;
		height: 470px;
		min-height: 28rem;
		line-height: 2em;
		padding-top: 8.5em;
		opacity: 1;
		text-align: center;
		border: 0.14em dashed green;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		overflow: hidden;
	  }
	  .btmodal_container .upload-btn {
		margin-left: 300px;
		padding: 7px 20px;
	  }
	  .btmodal_container .cls_filselector {position: relative;  bottom: 250px;}
	  .btmodal_container #sResult, .btmodal_container .cls_result {position: relative; margin-top: 10px; color:#716c6c;}
	  .btmodal_container .upload-container cls_fileupload { bottom: 228px;}
	  .btmodal_container .welcome, .btmodal_container .db-welcome {
		position: relative;
		height: 100%;
	  }
	  .btmodal_container .welcome-container, .btmodal_container .db-welcome-container{padding: 100px 0px 0px 0px;}

	 .btmodal_container .cls_filepreview {
        position: relative;
	    bottom: 0px;
	    height: 470px;
	    color: #3f8188;
	    font-weight: 900;
	    border: 1px solid #92b0b3;
	    border-radius: 4px;
	    top: 10px;
	    width: 96%;
	    text-align: center;
	 }
	 .btmodal_container .cls_filepreview:before {

	 }
	 .btmodal_container .cls_cancle { margin-left: 23px !important; float: left !important; }
	 .btmodal_container .cls_add { float: right; margin-right: 23px; }
	 .btmodal_container .cls_tabfooter {  margin-top: 10px;}
	 .btmodal_container .cls_tabinfo{  margin-top: 0px; padding:10px 0px;}
     .btmodal_container .cls_tabheader { margin-top: 0px; }
	 .btmodal_container .tab_content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-shrink: 1;
		align-items: center;
		padding: 0 20px;
		margin: 20px 0px;
	 }
	 .btmodal_container .cls_loginpanel{padding: 0px 2px 0px 0px; display: none; float: right; margin: -34px 0px 0px 0px;	 }
	 .btmodal_container .picker_loginpanel{padding: 0px 0px; display: block; float: right; margin: 0px 0px 0px 0px; position:absolute; right:8px; top: 8px;}
	 .btmodal_container .lb-image {
	    max-width: 200px;
	    max-height: 275px;
	}
	.btmodal_container .display_image_div{
		padding: 5px 5px 5px 5px;
	    border: 1px solid #e1e1e1;
	    border-radius: 4px;
	    background: #fff;
	    width: 212px;
    	height: 287px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
/*--------------------------------- END DRAG AND DROP CSS -------------------------------------*/


/*-------------------------- START GOOGLE DRIVE INBUILT API POPUP CSS -------------------------*/
.picker-dialog {
    border: 1px solid #acacac;
    width: 97% !important;
    height: 99% !important;
    padding: 0 !important;
    z-index: 999999 !important;
    overflow: auto;
    box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
    left: 10px !important;
    top: 0px !important;
}

.picker-dialog, .picker-dialog-bg {
    opacity: 0 !important;
    display: none !important;
}

/** GOOGLE PICKER CLOSE BUTTON HIDE **/
.ge-Df-db {
	opacity: 0 !important;
    display: none !important;
}

.ge-ek-db-Ci {
	background: none !important;
    height: 0px !important;
    width: 0px !important;
}

.btmodal_container iframe.picker-dialog-frame {
    width: 100%;
    height: 490px;
    border: 0;
    overflow: hidden;
	border-bottom-right-radius: 4px;
    border-top-right-radius: 4px
}

/*-------------------------- END GOOGLE DRIVE INBUILT API POPUP CSS -------------------------*/

/*----------------------------- START MODAL ERROR MESSAGE CSS -------------------------------*/
.btmodal_container .alert {
    position: absolute;
    padding: 5px 5px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    width: 92%;
    top: 18px;
    left: 27px;
    z-index: 99999;
	display: none;
}
.btmodal_container .gd_alert {
    position: absolute;
    padding: 6px 5px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    width: 87%;
    top: 70px;
    left: 84px;
    z-index: 99999;
	display: none;
}
.btmodal_container .alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.btmodal_container .alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/*----------------------------- END MODAL ERROR MESSAGE CSS -------------------------------*/


/*----------------------------- START ADDITIONAL MODAL CSS --------------------------------*/
@media (min-width: 992px){
	.btmodal_container .modal-lg, .btmodal_container .modal-xl {
	    max-width: 800px;
	}
}

.btmodal_container .wdgt-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    outline: 0;
}

.btmodal_container .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.btmodal_container .list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.25rem;
}

.btmodal_container .text-center {
    text-align: center!important;
}

.btmodal_container img, .btmodal_container svg {
    vertical-align: middle;
}

.btmodal_container .list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}

.btmodal_container .btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #328551;
    border: 1px solid transparent;
    padding: 0.3rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btmodal_container .btn:hover { background-color: #167EAF; }

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.modal-backdrop.show {
    opacity: .5;
}

.btmodal_container *, .btmodal_container ::after, .btmodal_container ::before {
    box-sizing: border-box;
}
/*----------------------------- END ADDITIONAL MODAL CSS --------------------------------*/